polen
Version:
A framework for delightful GraphQL developer portals
37 lines • 1.58 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Pre as CodeHikePre } from 'codehike/code';
import React from 'react';
import { GraphQLDocument } from '../../lib/graphql-document/components/GraphQLDocument.js';
/**
* Custom Pre component that adds interactive GraphQL support to Code Hike
*
* Usage in MDX:
* ```graphql interactive
* query { ... }
* ```
*/
export const Pre = (props) => {
// Check if this is a Code Hike pre component (has 'code' prop)
if ('code' in props && props.code) {
const { code } = props;
// Check if this is an interactive GraphQL block
if (code.lang === 'graphql' && code.meta?.includes('interactive')) {
// Extract the GraphQL schema if available
const schema = typeof window !== 'undefined'
? window.__POLEN_GRAPHQL_SCHEMA__
: null;
// For interactive GraphQL blocks, we need to apply Code Hike's styling
// but add GraphQLDocument's interactive features
return (_jsx(GraphQLDocument, { schema: schema, options: {
className: 'ch-code-container',
// Use Code Hike's Pre component for rendering
renderCode: () => _jsx(CodeHikePre, { ...props }),
}, children: code.code }));
}
// For other Code Hike code blocks, use Code Hike's Pre
return _jsx(CodeHikePre, { ...props });
}
// For standard HTML pre elements, render as-is
return _jsx("pre", { ...props });
};
//# sourceMappingURL=CodeHikePre.js.map