Don't show toolbar when rendering within GitBook app preview (#3635)

Author: viktorrenkema

packages/gitbook/src/components/AdminToolbar/AdminToolbar.tsx

@@ -1,11 +1,10 @@
 import type { GitBookSiteContext } from '@/lib/context';
 import { Icon } from '@gitbook/icons';
-import { headers } from 'next/headers';
 import React from 'react';
 
 import { tcls } from '@/lib/tailwind';
-
 import { DateRelative } from '../primitives';
+import { IframeWrapper } from './IframeWrapper';
 import { RefreshChangeRequestButton } from './RefreshChangeRequestButton';
 import { Toolbar, ToolbarBody, ToolbarButton, ToolbarButtonGroups } from './Toolbar';
 
@@ -47,19 +46,21 @@ function ToolbarLayout(props: { children: React.ReactNode }) {
  */
 export async function AdminToolbar(props: AdminToolbarProps) {
  const { context } = props;
- const mode = (await headers()).get('x-gitbook-mode');
-
- if (mode === 'multi-id') {
- // We don't show the admin toolbar in multi-id mode, as it's used for previewing in the dashboard.
- return null;
- }
 
  if (context.changeRequest) {
- return <ChangeRequestToolbar context={context} />;
+ return (
+ <IframeWrapper>
+ <ChangeRequestToolbar context={context} />
+ </IframeWrapper>
+ );
  }
 
  if (context.revisionId !== context.space.revision) {
- return <RevisionToolbar context={context} />;
+ return (
+ <IframeWrapper>
+ <RevisionToolbar context={context} />
+ </IframeWrapper>
+ );
  }
 
  return null;

packages/gitbook/src/components/AdminToolbar/IframeWrapper.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import React from 'react';
+
+interface IframeWrapperProps {
+ children: React.ReactNode;
+}
+
+/**
+ * Client component that detects if we're in an iframe and conditionally renders children
+ */
+export function IframeWrapper({ children }: IframeWrapperProps) {
+ const [isInIframe, setIsInIframe] = React.useState(false);
+
+ React.useEffect(() => {
+ // Check if we're running inside an iframe
+ const inIframe = window !== window.parent;
+ setIsInIframe(inIframe);
+ }, []);
+
+ // Don't render children if we're in an iframe (GitBook app preview)
+ if (isInIframe) {
+ return null;
+ }
+
+ return children;
+}

packages/gitbook/src/components/AdminToolbar/index.ts

@@ -1 +1,2 @@
 export * from './AdminToolbar';
+export * from './IframeWrapper';