Add React body components for the pickers and copy seam (dormant) (#61776)

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

Author: heiskr

src/frame/components/CopyButton.tsx

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { ComponentPropsWithoutRef } from 'react'
+import { announce } from '@primer/live-region-element'
+
+type CopyButtonProps = ComponentPropsWithoutRef<'button'> & {
+  'data-clipboard'?: string
+}
+
+// React replacement for the imperative `copy-code.ts` enhancer. The code-block
+// header (`content-render/unified/code-header.ts`) emits this button into the
+// HTML AST next to a hidden `<pre data-clipboard="<id>">` holding the raw code.
+// When the article body is rendered from hast (instead of dangerouslySetInnerHTML),
+// `MarkdownContent` maps that `<button class="js-btn-copy">` to this component so
+// React owns the node rather than a post-hydration `document.querySelectorAll`.
+//
+// Analytics is intentionally NOT sent here: a global delegated click listener in
+// `events/components/events.ts` already records `.js-btn-copy` clicks.
+export function CopyButton({ className, children, ...props }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [])
+
+  const clipboardId = props['data-clipboard']
+
+  const handleClick = useCallback(async () => {
+    if (!clipboardId) return
+
+    // The hidden <pre> is a sibling of this button inside the code-block header,
+    // so look it up locally to avoid copying a different block that happens to
+    // share the same content hash.
+    const scope: Element | Document = buttonRef.current?.parentElement ?? document
+    const pre = scope.querySelector<HTMLElement>(`pre[data-clipboard="${CSS.escape(clipboardId)}"]`)
+    const text = pre?.innerText
+    if (!text) return
+
+    try {
+      await navigator.clipboard.writeText(text)
+    } catch {
+      // Clipboard write can be blocked (permissions, insecure context, etc.).
+      // Don't show a false "Copied!" state.
+      return
+    }
+
+    setCopied(true)
+    announce('Copied!')
+
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    timeoutRef.current = setTimeout(() => setCopied(false), 2000)
+  }, [clipboardId])
+
+  return (
+    <button
+      type="button"
+      {...props}
+      ref={buttonRef}
+      className={copied ? `${className ?? ''} copied`.trim() : className}
+      onClick={handleClick}
+    >
+      {children}
+    </button>
+  )
+}

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

@@ -1,31 +1,76 @@
 import { memo, ReactNode } from 'react'
-import type { JSX } from 'react'
+import type { ComponentProps, JSX } from 'react'
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime'
+import { toJsxRuntime, type Components } from 'hast-util-to-jsx-runtime'
+import type { Root as HastRoot } from 'hast'
 import cx from 'classnames'
 
+import { CopyButton } from '@/frame/components/CopyButton'
+import { ToggleableContent } from '@/tools/components/ToggleableContent'
+import { isToggleClass } from '@/tools/components/SelectionContext'
 import styles from './MarkdownContent.module.scss'
 
 export type MarkdownContentPropsT = {
-  children: string | ReactNode
+  children?: string | ReactNode
+  hast?: HastRoot
   className?: string
   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'>) {
+    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.
 export const MarkdownContent = memo(function MarkdownContent({
   children,
+  hast,
   as: Component = 'div',
   className,
   ...restProps
 }: MarkdownContentPropsT) {
+  // When a hast (HTML AST) tree is provided, render it as real React elements
+  // instead of injecting an HTML string via dangerouslySetInnerHTML (#6619).
+  const childProps = hast
+    ? { children: toJsxRuntime(hast, { Fragment, jsx, jsxs, components: markdownComponents }) }
+    : typeof children === 'string'
+      ? { dangerouslySetInnerHTML: { __html: children } }
+      : { children }
+
   return (
     <Component
       {...restProps}
       className={cx(styles.markdownBody, 'markdown-body', className)}
-      {...(typeof children === 'string'
-        ? { dangerouslySetInnerHTML: { __html: children } }
-        : { children })}
+      {...childProps}
     />
   )
 })

src/tools/components/SelectionContext.tsx

@@ -0,0 +1,112 @@
+import { createContext, useContext, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+
+import { allPlatforms } from '@/tools/lib/all-platforms'
+import { allTools } from '@/tools/lib/all-tools'
+
+// React-native replacement for the imperative platform/tool visibility toggling
+// that PlatformPicker/ToolPicker used to do by walking the DOM and setting
+// `style.display` on `.ghd-tool`/`.platform-*`/`.tool-*` elements (#6619). The
+// selected platform + tool live in this context; the article body (rendered from
+// hast) maps the relevant elements to <ToggleableContent>, which reads the
+// selection and hides non-matching content instead of mutating React-owned nodes.
+//
+// Selections start empty so that the server render and the first client render
+// both show ALL variants (matching the pre-JS markup), which keeps hydration
+// stable. The pickers set the real selection in an effect after hydration, the
+// same moment the old imperative code used to run.
+
+export type SelectionContextT = {
+  platform: string
+  tool: string
+  setPlatform: (value: string) => void
+  setTool: (value: string) => void
+}
+
+const noop = () => {}
+
+export const SelectionContext = createContext<SelectionContextT>({
+  platform: '',
+  tool: '',
+  setPlatform: noop,
+  setTool: noop,
+})
+
+export function SelectionProvider({ children }: { children: ReactNode }) {
+  const [platform, setPlatform] = useState('')
+  const [tool, setTool] = useState('')
+
+  const value = useMemo<SelectionContextT>(
+    () => ({ platform, tool, setPlatform, setTool }),
+    [platform, tool],
+  )
+
+  return <SelectionContext.Provider value={value}>{children}</SelectionContext.Provider>
+}
+
+export function useSelection(): SelectionContextT {
+  return useContext(SelectionContext)
+}
+
+const platformSet = new Set<string>(allPlatforms)
+const toolSet = new Set<string>(Object.keys(allTools))
+
+export type ToggleClassification = {
+  scope: 'platform' | 'tool'
+  value: string
+}
+
+function toClassList(className: unknown): string[] {
+  if (Array.isArray(className)) return className.map(String)
+  if (typeof className === 'string') return className.split(/\s+/).filter(Boolean)
+  return []
+}
+
+// Determine whether an element is platform/tool-scoped and which value gates it.
+// `.ghd-tool <value>` is a block (the {% mac %}/{% webui %} liquid tags); the
+// extra class is the platform or tool value. `platform-<value>`/`tool-<value>`
+// are author-written inline spans. We classify strictly against the canonical
+// platform/tool vocabularies and return null on anything outside them, so an
+// unrecognized class never makes content disappear. When several recognized
+// markers are present the first match wins; in practice an element carries
+// exactly one platform/tool marker.
+export function classifyToggleClass(className: unknown): ToggleClassification | null {
+  const classes = toClassList(className)
+  if (!classes.length) return null
+
+  if (classes.includes('ghd-tool')) {
+    const platform = classes.find((c) => platformSet.has(c))
+    if (platform) return { scope: 'platform', value: platform }
+    const tool = classes.find((c) => toolSet.has(c))
+    if (tool) return { scope: 'tool', value: tool }
+    return null
+  }
+
+  for (const c of classes) {
+    if (c.startsWith('platform-')) {
+      const value = c.slice('platform-'.length)
+      if (platformSet.has(value)) return { scope: 'platform', value }
+    }
+    if (c.startsWith('tool-')) {
+      const value = c.slice('tool-'.length)
+      if (toolSet.has(value)) return { scope: 'tool', value }
+    }
+  }
+
+  return null
+}
+
+export function isToggleClass(className: unknown): boolean {
+  return classifyToggleClass(className) !== null
+}
+
+// Visible when no selection has been made yet (initial render shows everything,
+// matching the pre-JS markup) or when the element's value is the selected one.
+export function isContentVisible(
+  classification: ToggleClassification,
+  selection: { platform: string; tool: string },
+): boolean {
+  const selected = classification.scope === 'platform' ? selection.platform : selection.tool
+  if (!selected) return true
+  return classification.value === selected
+}

src/tools/components/ToggleableContent.tsx

@@ -0,0 +1,33 @@
+import { createElement } from 'react'
+import type { ReactNode } from 'react'
+
+import {
+  classifyToggleClass,
+  isContentVisible,
+  useSelection,
+} from '@/tools/components/SelectionContext'
+
+// Wraps a platform/tool-scoped element from the article body hast and toggles
+// its visibility from SelectionContext instead of the old imperative
+// `style.display` mutation (#6619). Renders the same element/props/children, but
+// sets `hidden` when the current platform/tool selection doesn't match. We keep
+// the node in the DOM (hidden) rather than returning null so anchors, IDs, and
+// screen-reader traversal behave like the previous `display:none` approach.
+type ToggleableContentProps = {
+  tag: 'div' | 'span'
+  className?: string
+  hidden?: boolean
+  children?: ReactNode
+  [key: string]: unknown
+}
+
+export function ToggleableContent({ tag, ...props }: ToggleableContentProps) {
+  const { platform, tool } = useSelection()
+  const classification = classifyToggleClass(props.className)
+
+  const hidden = classification
+    ? Boolean(props.hidden) || !isContentVisible(classification, { platform, tool })
+    : props.hidden
+
+  return createElement(tag, { ...props, hidden })
+}