Skip the Ask AI paragraph button inside tables (#4680)

.changeset/skip-ask-ai-in-tables.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Skip rendering the Ask AI paragraph button inside table cells, where it is hidden, to keep pages with large tables within memory limits.

packages/gitbook/src/components/DocumentView/Paragraph.tsx

@@ -9,7 +9,7 @@ import { getNodeText } from '@/lib/document';
 import { tcls } from '@/lib/tailwind';
 
 export function Paragraph(props: BlockProps<DocumentBlockParagraph>) {
-    const { block, style, ...contextProps } = props;
+    const { block, style, ancestorBlocks, ...contextProps } = props;
     const { context } = contextProps;
 
     const paragraph = (
@@ -28,6 +28,8 @@ export function Paragraph(props: BlockProps<DocumentBlockParagraph>) {
     const contentContext = context.contentContext;
     const aiAssistantEnabled =
         context.mode !== 'print' &&
+        // The button is hidden in table cells, and big tables can hold thousands of paragraphs.
+        !ancestorBlocks.some((ancestor) => ancestor.type === 'table') &&
         contentContext != null &&
         'customization' in contentContext &&
         contentContext.customization.ai.mode === CustomizationAIMode.Assistant;

packages/gitbook/src/components/DocumentView/Table/RecordColumnValue.tsx

@@ -50,6 +50,7 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
         tag: Tag = 'div',
         ariaLabelledBy,
         block,
+        ancestorBlocks,
         document,
         record,
         column,
@@ -151,7 +152,7 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
                 <Blocks
                     tag={Tag}
                     document={document}
-                    ancestorBlocks={[]}
+                    ancestorBlocks={[...ancestorBlocks, block]}
                     nodes={fragment.nodes}
                     style={[
                         'blocks',

packages/gitbook/src/components/DocumentView/utils/isBlockOffscreen.test.ts

@@ -1,6 +1,6 @@
 import { expect, it } from 'bun:test';
 
-import type { DocumentBlockParagraph, JSONDocument } from '@gitbook/api';
+import type { DocumentBlockParagraph, DocumentBlockTable, JSONDocument } from '@gitbook/api';
 
 import { isBlockOffscreen } from './isBlockOffscreen';
 
@@ -42,3 +42,31 @@ it('should return true if block is offscreen', () => {
         )
     ).toBe(true);
 });
+
+it('should treat content in table cells as offscreen', () => {
+    const cell: DocumentBlockParagraph = {
+        object: 'block',
+        type: 'paragraph',
+        nodes: [],
+    };
+
+    const table: DocumentBlockTable = {
+        object: 'block',
+        type: 'table',
+        isVoid: true,
+        data: {
+            view: { type: 'cards', cardSize: 'medium', columns: ['column'] },
+            records: {},
+            definition: {},
+        },
+        fragments: [{ object: 'fragment', fragment: 'cell', nodes: [cell] }],
+    };
+
+    const document: JSONDocument = {
+        object: 'document',
+        nodes: [table],
+        data: {},
+    };
+
+    expect(isBlockOffscreen({ document, block: cell, ancestorBlocks: [table] })).toBe(true);
+});

packages/gitbook/src/components/DocumentView/utils/isBlockOffscreen.ts

@@ -18,6 +18,11 @@ export function isBlockOffscreen(
     },
     screenHeight = 500
 ): boolean {
+    // Cell content lives in fragments, not table nodes, so its row position can't be estimated.
+    if (ancestorBlocks.some((ancestor) => ancestor.type === 'table')) {
+        return true;
+    }
+
     let current = block;
 
     const allAncestors = [document, ...ancestorBlocks];