Add RenderedHTML foundation for removing dangerouslySetInnerHTML (#61956)

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

Author: heiskr

package-lock.json

@@ -212,6 +212,7 @@
     "flat": "^6.0.1",
     "github-slugger": "^2.0.0",
     "glob": "13.0.2",
+    "hast-util-from-html": "^2.0.3",
     "hast-util-from-parse5": "^8.0.3",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "hast-util-to-string": "^3.0.1",

package.json

@@ -1,14 +1,11 @@
 import { memo, ReactNode } from 'react'
-import type { ComponentProps, JSX } from 'react'
+import type { JSX } from 'react'
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime'
-import { toJsxRuntime, type Components } from 'hast-util-to-jsx-runtime'
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
 import type { Root as HastRoot } from 'hast'
 import cx from 'classnames'
 
-import { CopyButton } from '@/frame/components/CopyButton'
-import { CodeTabsGroup } from '@/frame/components/CodeTabsGroup'
-import { ToggleableContent } from '@/tools/components/ToggleableContent'
-import { isToggleClass } from '@/tools/components/SelectionContext'
+import { markdownComponents } from './markdownComponents'
 import styles from './MarkdownContent.module.scss'
 
 export type MarkdownContentPropsT = {
@@ -18,41 +15,6 @@ export type MarkdownContentPropsT = {
   as?: keyof JSX.IntrinsicElements
 }
 
-// Map specific elements in the HTML AST to interactive React components instead
-// of inert markup enhanced by post-hydration DOM mutation (#6619). This only
-// applies to the hast rendering path; the dangerouslySetInnerHTML string path is
-// untouched. The same map runs during SSR and on the client, so hydration matches.
-const markdownComponents = {
-  button(props: ComponentProps<'button'>) {
-    const classes = String(props.className || '').split(/\s+/)
-    if (classes.includes('js-btn-copy')) {
-      return <CopyButton {...props} />
-    }
-    return <button {...props} />
-  },
-  // Platform/tool-scoped blocks and inline spans subscribe to SelectionContext so
-  // the pickers can hide non-matching content via React state instead of the old
-  // imperative `style.display` DOM mutation (#6619). The className check is cheap
-  // and runs first, so only the handful of toggleable elements become context
-  // consumers; every other div/span renders as a plain element with no hook.
-  div(props: ComponentProps<'div'>) {
-    const classes = String(props.className || '').split(/\s+/)
-    if (classes.includes('ghd-codetabs')) {
-      return <CodeTabsGroup {...props} />
-    }
-    if (isToggleClass(props.className)) {
-      return <ToggleableContent tag="div" {...props} />
-    }
-    return <div {...props} />
-  },
-  span(props: ComponentProps<'span'>) {
-    if (isToggleClass(props.className)) {
-      return <ToggleableContent tag="span" {...props} />
-    }
-    return <span {...props} />
-  },
-} as unknown as Partial<Components>
-
 // Memoized so that re-renders of the parent (e.g. when ToolPicker/PlatformPicker
 // state updates) don't cause React 19 to re-apply `dangerouslySetInnerHTML` and
 // wipe out the inline `display` styles set imperatively by the pickers.

src/frame/components/ui/MarkdownContent/MarkdownContent.tsx

@@ -0,0 +1,44 @@
+import type { ComponentProps } from 'react'
+import type { Components } from 'hast-util-to-jsx-runtime'
+
+import { CopyButton } from '@/frame/components/CopyButton'
+import { CodeTabsGroup } from '@/frame/components/CodeTabsGroup'
+import { ToggleableContent } from '@/tools/components/ToggleableContent'
+import { isToggleClass } from '@/tools/components/SelectionContext'
+
+// Map specific elements in the HTML AST to interactive React components instead
+// of inert markup enhanced by post-hydration DOM mutation (#6619). Shared by
+// every hast rendering path (the article body via MarkdownContent and the
+// HTML-string fragments via RenderedHTML) so the same element always becomes the
+// same component, and SSR/client hydration stay in sync.
+//
+// The className checks are cheap and run first, so only the handful of
+// interactive/toggleable elements become components; every other div/span/button
+// renders as a plain element with no hook. Unrecognized classes fall through to
+// plain elements, so fragments that never contain pickers or copy buttons (e.g.
+// GraphQL/REST descriptions) are unaffected.
+export const markdownComponents = {
+  button(props: ComponentProps<'button'>) {
+    const classes = String(props.className || '').split(/\s+/)
+    if (classes.includes('js-btn-copy')) {
+      return <CopyButton {...props} />
+    }
+    return <button {...props} />
+  },
+  div(props: ComponentProps<'div'>) {
+    const classes = String(props.className || '').split(/\s+/)
+    if (classes.includes('ghd-codetabs')) {
+      return <CodeTabsGroup {...props} />
+    }
+    if (isToggleClass(props.className)) {
+      return <ToggleableContent tag="div" {...props} />
+    }
+    return <div {...props} />
+  },
+  span(props: ComponentProps<'span'>) {
+    if (isToggleClass(props.className)) {
+      return <ToggleableContent tag="span" {...props} />
+    }
+    return <span {...props} />
+  },
+} as unknown as Partial<Components>

src/frame/components/ui/MarkdownContent/markdownComponents.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from 'react'
+import type { ComponentPropsWithoutRef, ElementType } from 'react'
+
+import { markdownComponents } from '@/frame/components/ui/MarkdownContent/markdownComponents'
+import { renderHTMLString } from './render-html-string'
+
+type RenderedHTMLOwnProps = {
+  // A trusted HTML string (already produced by our own render pipeline or build
+  // step) to render as real React elements. This string is rendered as markup,
+  // so it MUST be trusted/sanitized upstream; React only escapes text nodes, not
+  // the tags and attributes contained in this string.
+  html: string
+}
+
+export type RenderedHTMLProps<T extends ElementType = 'div'> = RenderedHTMLOwnProps & {
+  // The wrapper element to render the parsed content inside. Defaults to a div;
+  // pass e.g. 'span' for inline contexts or 'td' inside tables. Passthrough props
+  // are typed against this element (e.g. `colSpan` is allowed when `as="td"`).
+  as?: T
+} & Omit<ComponentPropsWithoutRef<T>, keyof RenderedHTMLOwnProps | 'as' | 'children'>
+
+// Renders a trusted HTML string as real React elements instead of injecting it
+// as raw innerHTML (#6619). The string is parsed to hast and handed to the same
+// component map the article body uses, so React owns the resulting element tree.
+//
+// This is NOT a sanitizer. It carries the same trust assumption as
+// dangerouslySetInnerHTML: arbitrary tags/attributes in `html` are rendered, so
+// the string must already be trusted/sanitized upstream. The benefit over
+// dangerouslySetInnerHTML is that React owns the tree (no post-hydration DOM
+// mutation) and the move unblocks the react/no-danger lint guard, not added XSS
+// protection.
+//
+// Use this for the many call sites that hold a pre-rendered HTML fragment (e.g.
+// GraphQL/REST descriptions from build-time data, or request-time rendered
+// intros). For the markdown article body, prefer MarkdownContent with a `hast`
+// prop, which avoids the parse round-trip.
+export function RenderedHTML<T extends ElementType = 'div'>({
+  html,
+  as,
+  ...rest
+}: RenderedHTMLProps<T>) {
+  const Component: ElementType = as || 'div'
+  // `markdownComponents` is a module constant, so it is intentionally omitted
+  // from the dependency list; only `html` changes the rendered output.
+  const content = useMemo(() => renderHTMLString(html, markdownComponents), [html])
+
+  return <Component {...rest}>{content}</Component>
+}

src/frame/components/ui/RenderedHTML/RenderedHTML.tsx

@@ -0,0 +1,3 @@
+export { RenderedHTML } from './RenderedHTML'
+export type { RenderedHTMLProps } from './RenderedHTML'
+export { renderHTMLString } from './render-html-string'

src/frame/components/ui/RenderedHTML/index.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react'
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime'
+import { toJsxRuntime, type Components } from 'hast-util-to-jsx-runtime'
+import { fromHtml } from 'hast-util-from-html'
+
+// Parse a trusted HTML string into hast and render it as React elements (#6619).
+// Pure and dependency-light on purpose: it imports no UI components, so it can be
+// unit-tested without pulling in the styling/component chain. RenderedHTML wraps
+// this with the shared interactive component map.
+export function renderHTMLString(html: string, components?: Partial<Components>): ReactNode {
+  return toJsxRuntime(fromHtml(html, { fragment: true }), {
+    Fragment,
+    jsx,
+    jsxs,
+    components,
+  })
+}