polen 0.10.0-next.8 → 0.10.0

package/src/template/components/Changelog/groups/InputFieldOperation.tsx

@@ -0,0 +1,29 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const InputFieldOperation: React.FC<{ change: GraphqlChange.Group.InputFieldOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `INPUT_FIELD_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added input field <Code>{change.meta.addedInputFieldName}</Code> to <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+    case `INPUT_FIELD_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed input field <Code>{change.meta.removedFieldName}</Code> from <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+    case `INPUT_FIELD_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed field <Code>{change.meta.inputFieldName}</Code> type from <Code>{change.meta.oldInputFieldType}</Code>
+          {' '}
+          to <Code>{change.meta.newInputFieldType}</Code> on input <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+  }
+}

package/src/template/components/Changelog/groups/ObjectTypeInterfaceOperation.tsx

@@ -0,0 +1,25 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const ObjectTypeInterfaceOperation: React.FC<{ change: GraphqlChange.Group.ObjectTypeInterfaceOperation }> = (
+  { change },
+) => {
+  switch (change.type) {
+    case `OBJECT_TYPE_INTERFACE_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          <Code>{change.meta.objectTypeName}</Code> object implements <Code>{change.meta.addedInterfaceName}</Code>{' '}
+          interface
+        </ChangeBase>
+      )
+    case `OBJECT_TYPE_INTERFACE_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          <Code>{change.meta.objectTypeName}</Code> object no longer implements{' '}
+          <Code>{change.meta.removedInterfaceName}</Code> interface
+        </ChangeBase>
+      )
+  }
+}

package/src/template/components/Changelog/groups/SchemaRootType.tsx

@@ -0,0 +1,31 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const SchemaRootType: React.FC<{ change: GraphqlChange.Group.SchemaRootType }> = ({ change }) => {
+  switch (change.type) {
+    case `SCHEMA_QUERY_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Schema query root type changed from <Code>{change.meta.oldQueryTypeName}</Code> to{' '}
+          <Code>{change.meta.newQueryTypeName}</Code>
+        </ChangeBase>
+      )
+    case `SCHEMA_MUTATION_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Schema mutation root type changed from <Code>{change.meta.oldMutationTypeName || `null`}</Code> to{' '}
+          <Code>{change.meta.newMutationTypeName || `null`}</Code>
+        </ChangeBase>
+      )
+    case `SCHEMA_SUBSCRIPTION_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Schema subscription root type changed from <Code>{change.meta.oldSubscriptionTypeName || `null`}</Code> to
+          {' '}
+          <Code>{change.meta.newSubscriptionTypeName || `null`}</Code>
+        </ChangeBase>
+      )
+  }
+}

package/src/template/components/Changelog/groups/TypeDescription.tsx

@@ -0,0 +1,27 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const TypeDescription: React.FC<{ change: GraphqlChange.Group.TypeDescription }> = ({ change }) => {
+  switch (change.type) {
+    case `TYPE_DESCRIPTION_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added description to type <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_DESCRIPTION_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed description from type <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_DESCRIPTION_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed description for type <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+  }
+}

package/src/template/components/Changelog/groups/TypeOperation.tsx

@@ -0,0 +1,27 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const TypeOperation: React.FC<{ change: GraphqlChange.Group.TypeOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `TYPE_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added type <Code>{change.meta.addedTypeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed type <Code>{change.meta.removedTypeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_KIND_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed type <Code>{change.meta.typeName}</Code> from {change.meta.oldTypeKind} to {change.meta.newTypeKind}
+        </ChangeBase>
+      )
+  }
+}

package/src/template/components/Changelog/groups/UnionMemberOperation.tsx

@@ -0,0 +1,21 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const UnionMemberOperation: React.FC<{ change: GraphqlChange.Group.UnionMemberOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `UNION_MEMBER_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added <Code>{change.meta.addedUnionMemberTypeName}</Code> to union <Code>{change.meta.unionName}</Code>
+        </ChangeBase>
+      )
+    case `UNION_MEMBER_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed <Code>{change.meta.removedUnionMemberTypeName}</Code> from union <Code>{change.meta.unionName}</Code>
+        </ChangeBase>
+      )
+  }
+}

package/src/template/components/Changelog/groups/index.ts

@@ -0,0 +1,25 @@
+export { DirectiveArgument } from './DirectiveArgument.js'
+export { DirectiveArgumentDescription } from './DirectiveArgumentDescription.js'
+export { DirectiveArgumentOperation } from './DirectiveArgumentOperation.js'
+export { DirectiveDescription } from './DirectiveDescription.js'
+export { DirectiveLocationOperation } from './DirectiveLocationOperation.js'
+export { DirectiveOperation } from './DirectiveOperation.js'
+export { DirectiveUsage } from './DirectiveUsage.js'
+export { EnumValueDeprecationReason } from './EnumValueDeprecationReason.js'
+export { EnumValueDescription } from './EnumValueDescription.js'
+export { EnumValueOperation } from './EnumValueOperation.js'
+export { FieldArgument } from './FieldArgument.js'
+export { FieldArgumentDescription } from './FieldArgumentDescription.js'
+export { FieldArgumentOperation } from './FieldArgumentOperation.js'
+export { FieldDeprecation } from './FieldDeprecation.js'
+export { FieldDeprecationReason } from './FieldDeprecationReason.js'
+export { FieldDescription } from './FieldDescription.js'
+export { FieldOperation } from './FieldOperation.js'
+export { InputFieldDefaultValue } from './InputFieldDefaultValue.js'
+export { InputFieldDescription } from './InputFieldDescription.js'
+export { InputFieldOperation } from './InputFieldOperation.js'
+export { ObjectTypeInterfaceOperation } from './ObjectTypeInterfaceOperation.js'
+export { SchemaRootType } from './SchemaRootType.js'
+export { TypeDescription } from './TypeDescription.js'
+export { TypeOperation } from './TypeOperation.js'
+export { UnionMemberOperation } from './UnionMemberOperation.js'

package/src/template/components/Changelog.tsx

@@ -1,11 +1,15 @@
 import type { GrafaidOld } from '#lib/grafaid-old/index'
-import { Grafaid } from '#lib/grafaid/index'
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import { CRITICALITY_LEVELS } from '#lib/graphql-change/criticality'
+import { GraphqlChange } from '#lib/graphql-change/index'
 import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
-import { Box, Code } from '@radix-ui/themes'
+import type { CriticalityLevel } from '@graphql-inspector/core'
+import { Box } from '@radix-ui/themes'
+import { neverCase } from '@wollybeard/kit/language'
 import type React from 'react'
-import type { Schema as ChangelogData } from '../../api/schema/index.ts'
-import { Graphql } from './graphql/index.ts'
+import { useMemo } from 'react'
+import type { Schema as ChangelogData } from '../../api/schema/index.js'
+import { CriticalitySection } from './Changelog/CriticalitySection.js'
+import * as Group from './Changelog/groups/index.js'
 
 export const renderDate = (date: Date) => {
   return date.toLocaleString(`default`, {
@@ -19,20 +23,50 @@ export const renderDate = (date: Date) => {
 export const Changelog: React.FC<{ schema: ChangelogData.Schema }> = ({ schema }) => {
   return (
     <Box>
-      {schema.versions.map(changeset => <Changeset key={changeset.date.getDate()} changeset={changeset} />)}
+      {schema.versions.map(changeset => <Changeset key={changeset.date.toISOString()} changeset={changeset} />)}
     </Box>
   )
 }
 
 const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ changeset }) => {
+  // Group changes by criticality level
+  const groupedChanges = useMemo(() => {
+    const groups = {} as Record<CriticalityLevel, GraphqlChange.Change[]>
+
+    // Initialize empty arrays for each level
+    CRITICALITY_LEVELS.forEach(level => {
+      groups[level] = []
+    })
+
+    // Group changes
+    changeset.changes.forEach(change => {
+      const level = change.criticality.level
+      if (groups[level]) {
+        groups[level].push(change)
+      }
+    })
+
+    // Return only non-empty groups in order
+    return CRITICALITY_LEVELS
+      .filter(level => groups[level].length > 0)
+      .map(level => ({
+        level,
+        changes: groups[level],
+      }))
+  }, [changeset.changes])
+
   return (
-    <Box>
-      <h1 title={changeset.date.toISOString()}>
+    <Box mb='6'>
+      <h1 title={changeset.date.toISOString()} id={changeset.date.toISOString()}>
         {renderDate(changeset.date)}
       </h1>
-      <ul>
-        {changeset.changes.map(change => <Change key={change.message} change={change} schema={changeset.after} />)}
-      </ul>
+      {groupedChanges.map(group => (
+        <CriticalitySection key={group.level} level={group.level} changes={group.changes}>
+          {group.changes.map(change => (
+            <Change key={`${change.type}-${change.path || change.message}`} change={change} schema={changeset.after} />
+          ))}
+        </CriticalitySection>
+      ))}
     </Box>
   )
 }
@@ -40,58 +74,57 @@ const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ change
 const Change: React.FC<{ change: GraphqlChange.Change; schema: GrafaidOld.Schema.Schema }> = (
   { change, schema },
 ) => {
-  const getTypeOrThrow = (name: string) => {
-    const type = schema.getType(name)
-    if (!type) throw new Error(`Type ${name} not found`)
-    return type
-  }
-
-  switch (change.type) {
-    case `TYPE_ADDED`: {
-      const type = getTypeOrThrow(change.meta.addedTypeName)
-      return (
-        <li>
-          Added type <Graphql.TypeLink type={type} />
-        </li>
-      )
-    }
-    case `FIELD_ADDED`: {
-      const rootTypeMap = Grafaid.Schema.getRootTypeMap(schema)
-      const rootDetails = rootTypeMap.list.find(_ => _.name.canonical === change.meta.typeName)
-      const type = getTypeOrThrow(change.meta.typeName)
-      if (rootDetails) {
-        return (
-          <li>
-            Added {rootDetails.operationType}
-            {` `}
-            <Code
-              color='jade'
-              variant='ghost'
-              style={{ borderBottom: `1px dotted var(--jade-6)`, borderRadius: `0` }}
-            >
-              {change.meta.addedFieldName}
-            </Code>
-          </li>
-        )
-      }
-
-      return (
-        <li>
-          Added field{` `}
-          <Code
-            color='gray'
-            variant='ghost'
-            style={{ borderBottom: `1px dotted var(--gray-6)`, borderRadius: `0` }}
-          >
-            {change.meta.addedFieldName}
-          </Code>
-          {` `}
-          to type{` `}
-          <Graphql.TypeLink type={type} />.
-        </li>
-      )
-    }
-    default:
-      return <li>TODO: {change.type}</li>
+  if (GraphqlChange.Group.isTypeOperation(change)) {
+    return <Group.TypeOperation change={change} />
+  } else if (GraphqlChange.Group.isTypeDescription(change)) {
+    return <Group.TypeDescription change={change} />
+  } else if (GraphqlChange.Group.isFieldOperation(change)) {
+    return <Group.FieldOperation change={change} />
+  } else if (GraphqlChange.Group.isFieldDescription(change)) {
+    return <Group.FieldDescription change={change} />
+  } else if (GraphqlChange.Group.isFieldDeprecation(change)) {
+    return <Group.FieldDeprecation change={change} />
+  } else if (GraphqlChange.Group.isFieldDeprecationReason(change)) {
+    return <Group.FieldDeprecationReason change={change} />
+  } else if (GraphqlChange.Group.isFieldArgumentOperation(change)) {
+    return <Group.FieldArgumentOperation change={change} />
+  } else if (GraphqlChange.Group.isFieldArgument(change)) {
+    return <Group.FieldArgument change={change} />
+  } else if (GraphqlChange.Group.isFieldArgumentDescription(change)) {
+    return <Group.FieldArgumentDescription change={change} />
+  } else if (GraphqlChange.Group.isEnumValueOperation(change)) {
+    return <Group.EnumValueOperation change={change} />
+  } else if (GraphqlChange.Group.isEnumValueDescription(change)) {
+    return <Group.EnumValueDescription change={change} />
+  } else if (GraphqlChange.Group.isEnumValueDeprecationReason(change)) {
+    return <Group.EnumValueDeprecationReason change={change} />
+  } else if (GraphqlChange.Group.isInputFieldOperation(change)) {
+    return <Group.InputFieldOperation change={change} />
+  } else if (GraphqlChange.Group.isInputFieldDescription(change)) {
+    return <Group.InputFieldDescription change={change} />
+  } else if (GraphqlChange.Group.isInputFieldDefaultValue(change)) {
+    return <Group.InputFieldDefaultValue change={change} />
+  } else if (GraphqlChange.Group.isUnionMemberOperation(change)) {
+    return <Group.UnionMemberOperation change={change} />
+  } else if (GraphqlChange.Group.isObjectTypeInterfaceOperation(change)) {
+    return <Group.ObjectTypeInterfaceOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveOperation(change)) {
+    return <Group.DirectiveOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveDescription(change)) {
+    return <Group.DirectiveDescription change={change} />
+  } else if (GraphqlChange.Group.isDirectiveLocationOperation(change)) {
+    return <Group.DirectiveLocationOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveArgumentOperation(change)) {
+    return <Group.DirectiveArgumentOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveArgument(change)) {
+    return <Group.DirectiveArgument change={change} />
+  } else if (GraphqlChange.Group.isDirectiveArgumentDescription(change)) {
+    return <Group.DirectiveArgumentDescription change={change} />
+  } else if (GraphqlChange.Group.isSchemaRootType(change)) {
+    return <Group.SchemaRootType change={change} />
+  } else if (GraphqlChange.Group.isDirectiveUsage(change)) {
+    return <Group.DirectiveUsage change={change} />
+  } else {
+    neverCase(change)
   }
 }

package/src/template/components/ChangelogLayout.tsx

@@ -0,0 +1,157 @@
+import {
+  CRITICALITY_CONFIG,
+  isCriticalityBreaking,
+  isCriticalityDangerous,
+  isCriticalitySafe,
+} from '#lib/graphql-change/criticality'
+import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
+import { Box, Flex, Text } from '@radix-ui/themes'
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { renderDate } from './Changelog.js'
+
+interface ChangelogLayoutProps {
+  children: React.ReactNode
+  versions: GraphqlChangeset.ChangeSet[]
+}
+
+interface VersionCounts {
+  breaking: number
+  dangerous: number
+  safe: number
+}
+
+const calculateCounts = (version: GraphqlChangeset.ChangeSet): VersionCounts => {
+  return {
+    breaking: version.changes.filter(isCriticalityBreaking).length,
+    dangerous: version.changes.filter(isCriticalityDangerous).length,
+    safe: version.changes.filter(isCriticalitySafe).length,
+  }
+}
+
+const SidebarEntry: React.FC<{
+  version: GraphqlChangeset.ChangeSet
+  counts: VersionCounts
+  isActive: boolean
+}> = ({ version, counts, isActive }) => {
+  const dateId = version.date.toISOString()
+
+  return (
+    <Box mb='2'>
+      <a
+        href={`#${dateId}`}
+        style={{
+          textDecoration: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0.5rem 0.75rem',
+          borderRadius: '4px',
+          backgroundColor: isActive ? 'var(--gray-a3)' : 'transparent',
+          color: 'inherit',
+          transition: 'background-color 0.2s',
+        }}
+        onClick={(e) => {
+          e.preventDefault()
+          document.getElementById(dateId)?.scrollIntoView({ behavior: 'smooth' })
+        }}
+      >
+        <Text size='2' weight={isActive ? 'medium' : 'regular'}>
+          {renderDate(version.date)}
+        </Text>
+        <Flex gap='2' align='center'>
+          {counts.breaking > 0 && (
+            <Text size='1' weight='medium' style={{ color: CRITICALITY_CONFIG.BREAKING.color }}>
+              {counts.breaking}
+            </Text>
+          )}
+          {counts.dangerous > 0 && (
+            <Text size='1' weight='medium' style={{ color: CRITICALITY_CONFIG.DANGEROUS.color }}>
+              {counts.dangerous}
+            </Text>
+          )}
+          {counts.safe > 0 && (
+            <Text size='1' weight='medium' style={{ color: CRITICALITY_CONFIG.NON_BREAKING.color }}>
+              {counts.safe}
+            </Text>
+          )}
+        </Flex>
+      </a>
+    </Box>
+  )
+}
+
+export const ChangelogLayout: React.FC<ChangelogLayoutProps> = ({ children, versions }) => {
+  const [activeVersion, setActiveVersion] = useState<string | null>(null)
+
+  // Calculate counts for all versions (SSR-safe)
+  const versionsWithCounts = versions.map(version => ({
+    version,
+    counts: calculateCounts(version),
+  }))
+
+  // Set up scroll spy after hydration
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY + 100 // Offset for header
+
+      // Find the current version based on scroll position
+      let currentVersion: string | null = null
+
+      for (const { version } of versionsWithCounts) {
+        const element = document.getElementById(version.date.toISOString())
+        if (element) {
+          const { top } = element.getBoundingClientRect()
+          if (top <= 100) {
+            currentVersion = version.date.toISOString()
+          }
+        }
+      }
+
+      setActiveVersion(currentVersion)
+    }
+
+    // Initial check
+    handleScroll()
+
+    // Add scroll listener
+    window.addEventListener('scroll', handleScroll, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [versionsWithCounts])
+
+  return (
+    <Flex gap='6' style={{ position: 'relative' }}>
+      {/* Sidebar */}
+      <Box
+        style={{
+          position: 'sticky',
+          top: '2rem',
+          height: 'fit-content',
+          minWidth: '250px',
+          maxHeight: 'calc(100vh - 4rem)',
+          overflowY: 'auto',
+        }}
+      >
+        <Text size='2' weight='medium' mb='3' style={{ display: 'block' }}>
+          Releases
+        </Text>
+        {versionsWithCounts.map(({ version, counts }) => (
+          <SidebarEntry
+            key={version.date.toISOString()}
+            version={version}
+            counts={counts}
+            isActive={activeVersion === version.date.toISOString()}
+          />
+        ))}
+      </Box>
+
+      {/* Main content */}
+      <Box style={{ flex: 1, minWidth: 0 }}>
+        {children}
+      </Box>
+    </Flex>
+  )
+}

package/src/template/components/CodeBlock.tsx

@@ -1,73 +1,32 @@
-import { highlightCode } from '#lib/shiki/index'
-import React, { useEffect, useState } from 'react'
+import { type HighlightedCode, Pre } from 'codehike/code'
+import React from 'react'
+import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
+import { GraphQLInteractive } from './GraphQLInteractive/index.js'
 
 interface CodeBlockProps {
-  children: string
-  language?: string
-  className?: string
-  showLineNumbers?: boolean
-  highlightLines?: number[]
-  diffLines?: { add: number[]; remove: number[] }
-  focusLines?: number[]
-  showInvisibles?: boolean
+  codeblock: HighlightedCode
 }
 
-export const CodeBlock: React.FC<CodeBlockProps> = ({
-  children,
-  language = `text`,
-  className = ``,
-  showLineNumbers = false,
-  highlightLines = [],
-  diffLines,
-  focusLines = [],
-  showInvisibles = false,
-}) => {
-  const [html, setHtml] = useState<string>(``)
-  const [isLoading, setIsLoading] = useState(true)
+/**
+ * Code block component for Code Hike
+ * Handles pre-highlighted code blocks and interactive GraphQL blocks
+ */
+export const CodeBlock: React.FC<CodeBlockProps> = ({ codeblock }) => {
+  // Check if this is an interactive GraphQL block
+  if (codeblock.lang === 'graphql' && codeblock.meta?.includes('interactive')) {
+    const schema = typeof window !== 'undefined'
+      ? (window as any).__POLEN_GRAPHQL_SCHEMA__
+      : null
 
-  // TODO: Implement proper theme detection
-  // For now, we'll rely on CSS to handle theme switching
-  const theme = `light` // Default to light theme
-
-  useEffect(() => {
-    const renderCode = async () => {
-      try {
-        const output = await highlightCode({
-          code: children,
-          lang: language,
-          theme,
-          showLineNumbers,
-          highlightLines,
-          diffLines,
-          focusLines,
-          showInvisibles,
-        })
-
-        setHtml(output)
-      } catch (error) {
-        console.error(`Failed to highlight code:`, error)
-        // Fallback to plain text
-        setHtml(`<pre><code>${children}</code></pre>`)
-      } finally {
-        setIsLoading(false)
-      }
-    }
-
-    renderCode()
-  }, [children, language, showLineNumbers, highlightLines, diffLines, focusLines, showInvisibles])
-
-  if (isLoading) {
     return (
-      <pre className={className}>
-        <code>{children}</code>
-      </pre>
+      <GraphQLInteractive
+        codeblock={codeblock}
+        schema={schema}
+        showWarningIfNoSchema={PROJECT_DATA.warnings.interactiveWithoutSchema.enabled}
+      />
     )
   }
 
-  return (
-    <div
-      className={`code-block ${className}`}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  )
+  // For regular code blocks, use Code Hike's Pre component with pre-highlighted code
+  return <Pre code={codeblock} />
 }