Render the article body from hast and activate the React enhancers (#61778)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: heiskr

src/content-render/unified/wrap-procedural-images.ts

@@ -32,21 +32,28 @@ function insideOlLi(ancestors: Parent[]): boolean {
 }
 
 function visitor(node: Element, ancestors: Parent[]): void {
-  if (insideOlLi(ancestors)) {
-    const shallowClone: Element = Object.assign({}, node)
-    shallowClone.tagName = 'div'
-    shallowClone.properties = { class: 'procedural-image-wrapper' }
-    shallowClone.children = [node]
-    const parent = ancestors.at(-1)
-    if (parent && parent.children) {
-      parent.children = parent.children.map((child) => {
-        if (child.type === 'element' && (child as Element).tagName === 'img') {
-          return shallowClone
-        }
-        return child
-      })
+  if (!insideOlLi(ancestors)) return
+  const parent = ancestors.at(-1)
+  if (!parent || !parent.children) return
+
+  // When the image is already inside a <p> (the writer left a blank line before
+  // it), the paragraph already provides spacing. Wrapping a <div> inside that
+  // <p> produces invalid HTML (`<div>` cannot be a descendant of `<p>`), which
+  // the browser silently repairs for dangerouslySetInnerHTML but causes a React
+  // hydration mismatch when the content is rendered as real elements. So only
+  // add the wrapper for the no-<p> (tight list) case it was designed for.
+  if ((parent as Element).tagName === 'p') return
+
+  const shallowClone: Element = Object.assign({}, node)
+  shallowClone.tagName = 'div'
+  shallowClone.properties = { class: 'procedural-image-wrapper' }
+  shallowClone.children = [node]
+  parent.children = parent.children.map((child) => {
+    if (child.type === 'element' && (child as Element).tagName === 'img') {
+      return shallowClone
     }
-  }
+    return child
+  })
 }
 
 export default function wrapProceduralImages() {

src/fixtures/tests/images.ts

@@ -1,10 +1,19 @@
 import { describe, expect, test } from 'vitest'
 import sharp from 'sharp'
-import type { CheerioAPI } from 'cheerio'
+import type { Cheerio, CheerioAPI } from 'cheerio'
+import type { Element } from 'domhandler'
 
 import { get, head, getDOM } from '@/tests/helpers/e2etest'
 import { MAX_WIDTH } from '@/content-render/unified/rewrite-asset-img-tags'
 
+// `getDOM` parses with `xmlMode: true`, which is case-sensitive on attribute
+// names. The legacy string render path emits a lowercase `srcset`, but the
+// React render path (hast -> JSX) emits React 19's camelCase `srcSet`. Both are
+// valid HTML (attribute names are case-insensitive in browsers), so read either.
+function srcsetOf(el: Cheerio<Element>): string | undefined {
+  return el.attr('srcset') ?? el.attr('srcSet')
+}
+
 describe('render Markdown image tags', () => {
   test('page with a single image', async () => {
     const $: CheerioAPI = await getDOM('/get-started/images/single-image')
@@ -14,7 +23,7 @@ describe('render Markdown image tags', () => {
 
     const sources = $('source', pictures)
     expect(sources.length).toBe(1)
-    const srcset = sources.attr('srcset')
+    const srcset = srcsetOf(sources)
     expect(srcset).toMatch(
       new RegExp(`^/assets/cb-\\w+/mw-${MAX_WIDTH}/images/_fixtures/screenshot\\.webp 2x$`),
     )
@@ -54,9 +63,9 @@ describe('render Markdown image tags', () => {
     const sources = $('source', pictures)
     expect(sources.length).toBe(3)
 
-    expect(sources.eq(0).attr('srcset')).toContain('1x') // 0
-    expect(sources.eq(1).attr('srcset')).toContain('2x') // 1
-    expect(sources.eq(2).attr('srcset')).toContain('2x') // 2
+    expect(srcsetOf(sources.eq(0))).toContain('1x') // 0
+    expect(srcsetOf(sources.eq(1))).toContain('2x') // 1
+    expect(srcsetOf(sources.eq(2))).toContain('2x') // 2
   })
 
   test('image inside a list keeps its span', async () => {

src/frame/components/article/ArticlePage.tsx

@@ -21,6 +21,8 @@ import { CodeTabs } from '@/frame/components/CodeTabs'
 import { JourneyTrackCard, JourneyTrackNav } from '@/journeys/components'
 import { CopyMarkdownMenu } from './ViewMarkdownButton'
 import { ExperimentContentSwap } from '@/events/components/experiments/ExperimentContentSwap'
+import { SelectionProvider } from '@/tools/components/SelectionContext'
+import { CodeTabsProvider } from '@/frame/components/CodeTabsGroup'
 
 const ClientSideRefresh = dynamic(() => import('@/frame/components/ClientSideRefresh'), {
   ssr: false,
@@ -34,6 +36,7 @@ export const ArticlePage = () => {
     intro,
     effectiveDate,
     renderedPage,
+    renderedPageHast,
     permissions,
     includesPlatformSpecificContent,
     includesToolSpecificContent,
@@ -77,7 +80,11 @@ export const ArticlePage = () => {
 
   const articleContents = (
     <div id="article-contents">
-      <MarkdownContent>{renderedPage}</MarkdownContent>
+      {renderedPageHast ? (
+        <MarkdownContent hast={renderedPageHast} />
+      ) : (
+        <MarkdownContent>{renderedPage}</MarkdownContent>
+      )}
       <ExperimentContentSwap containerRef="#article-contents" />
       {effectiveDate && (
         <div className="mt-4" id="effectiveDate">
@@ -92,56 +99,62 @@ export const ArticlePage = () => {
 
   return (
     <DefaultLayout>
-      <LinkPreviewPopover />
-      <UtmPreserver />
-      <CodeTabs />
-      {isDev && <ClientSideRefresh />}
-      {router.pathname.includes('/rest/') && <RestRedirect />}
-      {currentLayout === 'inline' ? (
-        <>
-          <ArticleInlineLayout
-            supportPortalVaIframeProps={supportPortalVaIframeProps}
-            topper={<ArticleTitle>{title}</ArticleTitle>}
-            intro={introProp}
-            introCallOuts={introCalloutsProp}
-            toc={toc}
-            breadcrumbs={<Breadcrumbs />}
-          >
-            {articleContents}
-          </ArticleInlineLayout>
-          {isJourneyTrack ? (
-            <div className="container-lg mt-4 px-3">
-              <JourneyTrackNav context={currentJourneyTrack} />
-            </div>
-          ) : null}
-        </>
-      ) : (
-        <div className="container-xl px-3 px-md-6 my-4">
-          <div className={cx('d-none d-xxl-block mt-3 mr-auto width-full')}>
-            <Breadcrumbs />
-          </div>
+      <SelectionProvider>
+        <CodeTabsProvider>
+          <LinkPreviewPopover />
+          <UtmPreserver />
+          {/* The imperative CodeTabs enhancer only runs for the string fallback
+              path; on the hast path, CodeTabsGroup renders tabs React-natively. */}
+          {!renderedPageHast && <CodeTabs />}
+          {isDev && <ClientSideRefresh />}
+          {router.pathname.includes('/rest/') && <RestRedirect />}
+          {currentLayout === 'inline' ? (
+            <>
+              <ArticleInlineLayout
+                supportPortalVaIframeProps={supportPortalVaIframeProps}
+                topper={<ArticleTitle>{title}</ArticleTitle>}
+                intro={introProp}
+                introCallOuts={introCalloutsProp}
+                toc={toc}
+                breadcrumbs={<Breadcrumbs />}
+              >
+                {articleContents}
+              </ArticleInlineLayout>
+              {isJourneyTrack ? (
+                <div className="container-lg mt-4 px-3">
+                  <JourneyTrackNav context={currentJourneyTrack} />
+                </div>
+              ) : null}
+            </>
+          ) : (
+            <div className="container-xl px-3 px-md-6 my-4">
+              <div className={cx('d-none d-xxl-block mt-3 mr-auto width-full')}>
+                <Breadcrumbs />
+              </div>
 
-          <ArticleGridLayout
-            supportPortalVaIframeProps={supportPortalVaIframeProps}
-            topper={<ArticleTitle>{title}</ArticleTitle>}
-            intro={
-              <>
-                {introProp}
-                {introCalloutsProp}
-              </>
-            }
-            toc={toc}
-          >
-            {articleContents}
-          </ArticleGridLayout>
+              <ArticleGridLayout
+                supportPortalVaIframeProps={supportPortalVaIframeProps}
+                topper={<ArticleTitle>{title}</ArticleTitle>}
+                intro={
+                  <>
+                    {introProp}
+                    {introCalloutsProp}
+                  </>
+                }
+                toc={toc}
+              >
+                {articleContents}
+              </ArticleGridLayout>
 
-          {isJourneyTrack ? (
-            <div className="container-lg mt-4 px-3">
-              <JourneyTrackNav context={currentJourneyTrack} />
+              {isJourneyTrack ? (
+                <div className="container-lg mt-4 px-3">
+                  <JourneyTrackNav context={currentJourneyTrack} />
+                </div>
+              ) : null}
             </div>
-          ) : null}
-        </div>
-      )}
+          )}
+        </CodeTabsProvider>
+      </SelectionProvider>
     </DefaultLayout>
   )
 }

src/frame/components/context/ArticleContext.tsx

@@ -17,6 +17,7 @@ export type ArticleContextT = {
   intro: string
   effectiveDate: string
   renderedPage: string | JSX.Element[]
+  renderedPageHast?: import('hast').Root
   miniTocItems: Array<MiniTocItem>
   permissions?: string
   includesPlatformSpecificContent: boolean
@@ -60,6 +61,7 @@ interface ContextRequest {
   context: {
     page: Record<string, unknown> & { fullPath: string; title: string; intro: string }
     renderedPage?: string
+    renderedPageHast?: import('hast').Root
     miniTocItems?: MiniTocItem[]
     currentJourneyTrack?: JourneyContext
     currentLayoutName?: string
@@ -97,6 +99,7 @@ export const getArticleContextFromRequest = (req: ContextRequest): ArticleContex
     intro: page.intro,
     effectiveDate,
     renderedPage: (req.context.renderedPage as string) || '',
+    renderedPageHast: req.context.renderedPageHast,
     miniTocItems: req.context.miniTocItems || [],
     permissions: (page.permissions as string) || '',
     includesPlatformSpecificContent: (page.includesPlatformSpecificContent as boolean) || false,

src/frame/components/context/MainContext.tsx

@@ -191,6 +191,11 @@ export const getMainContext = async (
   if (context.currentJourneyTrack?.trackId) {
     addUINamespaces(req, ui, ['journey_track_nav'])
   }
+  // CodeTabs (rendered React-natively from the article body hast) needs its i18n
+  // strings shipped to the page; only articles can contain code tabs.
+  if (documentType === 'article') {
+    addUINamespaces(req, ui, ['code_tabs'])
+  }
 
   // Product index pages (depth-2 index.md, e.g. actions/index.md) need the
   // full product tree for landing rendering.

src/frame/components/ui/MiniTocs/MiniTocs.tsx

@@ -4,6 +4,11 @@ import cx from 'classnames'
 
 import type { MiniTocItem } from '@/frame/components/context/ArticleContext'
 import { useTranslation } from '@/languages/components/useTranslation'
+import {
+  classifyToggleClass,
+  isContentVisible,
+  useSelection,
+} from '@/tools/components/SelectionContext'
 
 import styles from './Minitocs.module.scss'
 
@@ -13,6 +18,7 @@ export type MiniTocsPropsT = {
 
 function RenderTocItem(item: MiniTocItem) {
   const [currentAnchor, setCurrentAnchor] = useState('')
+  const { platform, tool } = useSelection()
 
   useEffect(() => {
     const onHashChanged = () => {
@@ -26,6 +32,14 @@ function RenderTocItem(item: MiniTocItem) {
     }
   }, [])
 
+  // `item.platform` holds the class string of the heading's `.ghd-tool` ancestor
+  // (platform OR tool value). Hide the TOC entry when its platform/tool isn't the
+  // selected one, replacing the old imperative parent-<li> `style.display` hack.
+  const classification = classifyToggleClass(item.platform)
+  if (classification && !isContentVisible(classification, { platform, tool })) {
+    return null
+  }
+
   return (
     <>
       <NavList.Item

src/frame/middleware/render-page.ts

@@ -12,6 +12,7 @@ import type { ExtendedRequest } from '@/types'
 import { allVersions } from '@/versions/lib/all-versions'
 import { transformerRegistry } from '@/article-api/transformers'
 import { normalizeRenderedMarkdown } from '@/article-api/lib/normalize-markdown'
+import { renderContentToHast } from '@/content-render/index'
 import { minimumNotFoundHtml } from '../lib/constants'
 import { contentTypeCacheControl, defaultCacheControl } from './cache-control'
 import { nextHandleRequest } from './next'
@@ -40,6 +41,40 @@ async function buildRenderedPage(req: ExtendedRequest): Promise<string> {
   return (await pageRenderTimed(context)) as string
 }
 
+/**
+ * Spike for #6619 (remove dangerouslySetInnerHTML): produce the article body as
+ * a serializable hast (HTML AST) tree alongside the legacy HTML string.
+ *
+ * Must run AFTER buildRenderedPage, which calls page.render and populates the
+ * context fields the pipeline reads (englishHeadings, alertTitles). We render
+ * the same raw `page.markdown`, but with a context clone that omits
+ * `collectMiniToc` so the mini-TOC isn't collected a second time.
+ *
+ * Wrapped so a hast failure can never break the page: the React layer falls
+ * back to the string path when this is undefined. NOTE: this currently renders
+ * the body pipeline twice; the production design (see #6619 plan) should produce
+ * hast once and derive the string from it.
+ */
+async function buildRenderedPageHast(req: ExtendedRequest) {
+  const { context } = req
+  if (!context) throw new Error('request not contextualized')
+  const { page } = context
+  if (!page || !page.markdown) return undefined
+
+  try {
+    const hastContext = { ...context, collectMiniToc: undefined }
+    const { hast } = await renderContentToHast(page.markdown, hastContext)
+    return hast || undefined
+  } catch (error) {
+    logger.error(
+      'buildRenderedPageHast failed; falling back to string path',
+      error instanceof Error ? error : new Error(String(error)),
+      { path: req.pagePath || req.path },
+    )
+    return undefined
+  }
+}
+
 function buildMiniTocItems(req: ExtendedRequest) {
   const { context } = req
   if (!context) throw new Error('request not contextualized')
@@ -119,6 +154,7 @@ export default async function renderPage(req: ExtendedRequest, res: Response) {
     )
   } else {
     req.context.renderedPage = await buildRenderedPage(req)
+    req.context.renderedPageHast = await buildRenderedPageHast(req)
     req.context.miniTocItems = buildMiniTocItems(req)
   }
 

src/tools/components/PlatformPicker.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'
 import { useArticleContext } from '@/frame/components/context/ArticleContext'
 import { parseUserAgent } from '@/events/components/user-agent'
 import { InArticlePicker } from './InArticlePicker'
+import { useSelection } from './SelectionContext'
 import { OS_PREFERRED_COOKIE_NAME } from '@/frame/lib/constants'
 
 const platformQueryKey = 'platform'
@@ -47,7 +48,8 @@ function showPlatformSpecificContent(platform: string) {
 }
 
 export const PlatformPicker = () => {
-  const { defaultPlatform, detectedPlatforms } = useArticleContext()
+  const { defaultPlatform, detectedPlatforms, renderedPageHast } = useArticleContext()
+  const { setPlatform } = useSelection()
 
   const [defaultUA, setDefaultUA] = useState('')
   useEffect(() => {
@@ -75,7 +77,13 @@ export const PlatformPicker = () => {
       }
       cookieKey={OS_PREFERRED_COOKIE_NAME}
       queryStringKey={platformQueryKey}
-      onValue={showPlatformSpecificContent}
+      onValue={(value: string) => {
+        // Drive visibility through React state on the hast path (#6619). Only the
+        // string fallback (renderedPageHast undefined) still needs the imperative
+        // DOM mutation, since that markup isn't React-owned.
+        setPlatform(value)
+        if (!renderedPageHast) showPlatformSpecificContent(value)
+      }}
       preferenceName="os"
       ariaLabel="Platform"
       options={options}