Convert REST and webhook code highlighting to React (lowlight) (#61772)

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

Author: heiskr

package-lock.json

@@ -212,6 +212,7 @@
     "github-slugger": "^2.0.0",
     "glob": "13.0.2",
     "hast-util-from-parse5": "^8.0.3",
+    "hast-util-to-jsx-runtime": "^2.3.6",
     "hast-util-to-string": "^3.0.1",
     "hastscript": "^9.0.1",
     "helmet": "^8.1.0",

package.json

@@ -8,7 +8,6 @@ import { ArticleGridLayout } from '@/frame/components/article/ArticleGridLayout'
 import { ArticleInlineLayout } from '@/frame/components/article/ArticleInlineLayout'
 import { MiniTocs } from '@/frame/components/ui/MiniTocs'
 import { useAutomatedPageContext } from '@/automated-pipelines/components/AutomatedPageContext'
-import { ClientSideHighlight } from '@/frame/components/ClientSideHighlight'
 import { Breadcrumbs } from '@/frame/components/page-header/Breadcrumbs'
 import { JourneyTrackCard, JourneyTrackNav } from '@/journeys/components'
 
@@ -60,8 +59,6 @@ export const AutomatedPage = ({ children, rawChildren, fullWidth }: Props) => {
 
   return (
     <DefaultLayout>
-      <ClientSideHighlight />
-
       {currentLayout === 'inline' ? (
         <>
           <ArticleInlineLayout

src/automated-pipelines/components/AutomatedPage.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime'
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
+import { createLowlight } from 'lowlight'
+import json from 'highlight.js/lib/languages/json'
+import javascript from 'highlight.js/lib/languages/javascript'
+import hljsCurl from 'highlightjs-curl'
+import cx from 'classnames'
+
+// React-native replacement for the imperative ClientSideHighlightJS enhancer
+// (#6619). The old enhancer scanned the document for `[data-highlight] code` and
+// called `hljs.highlightElement`, which REPLACES the `<code>`'s innerHTML —
+// destructive on a React-owned node. Instead, components that render code
+// (RestCodeSamples, Webhook) use <HighlightedCode>, which highlights with
+// `lowlight` (the hast-based highlighter behind rehype-highlight) and renders the
+// tokens as real React elements via `toJsxRuntime`. No innerHTML, no DOM scan.
+//
+// Highlighting (the per-block compute) is deferred until the block scrolls into
+// view, preserving the old IntersectionObserver *compute* laziness so large REST
+// reference pages don't highlight every off-screen sample at once. Note: unlike
+// the old `dynamic(..., { ssr: false })` chunk, the highlighter libraries are now
+// statically bundled into these pages, so *load* laziness is not preserved. These
+// pages always contain code samples, so the chunk would have loaded anyway.
+
+// Keep the language set tight: highlight.js can pull in everything, which is huge.
+const lowlight = createLowlight({ json, javascript, curl: hljsCurl })
+const SUPPORTED_LANGUAGES = new Set(['json', 'javascript', 'curl'])
+
+function highlightToReact(language: string, code: string): ReactNode {
+  const tree = lowlight.highlight(language, code)
+  return toJsxRuntime(tree, { Fragment, jsx, jsxs })
+}
+
+type HighlightedCodeProps = {
+  language: string
+  code: string
+  className?: string
+}
+
+export function HighlightedCode({ language, code, className }: HighlightedCodeProps) {
+  const ref = useRef<HTMLElement>(null)
+  const [highlighted, setHighlighted] = useState<ReactNode>(null)
+
+  useEffect(() => {
+    setHighlighted(null)
+    if (!SUPPORTED_LANGUAGES.has(language)) return
+
+    const element = ref.current
+    // No IntersectionObserver (or no element): just highlight right away.
+    if (!element || typeof window === 'undefined' || !window.IntersectionObserver) {
+      setHighlighted(highlightToReact(language, code))
+      return
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          setHighlighted(highlightToReact(language, code))
+          observer.disconnect()
+          break
+        }
+      }
+    })
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [language, code])
+
+  // `hljs` provides the base theme; the same token classes (`hljs-*`) that
+  // highlight.js produced are emitted by lowlight, so styling is unchanged.
+  return (
+    <code ref={ref} className={cx('hljs', `language-${language}`, className)}>
+      {highlighted ?? code}
+    </code>
+  )
+}