Support emojis in outline (#3734)

Author: gregberge

packages/gitbook/e2e/internal.spec.ts

@@ -1454,10 +1454,7 @@ const testCases: TestsCase[] = [
                     locale,
                 },
             }),
-            run: async (page) => {
-                const dialog = page.getByTestId('cookies-dialog');
-                await expect(dialog).toBeVisible();
-            },
+            run: waitForCookiesDialog,
         })),
     },
     {

packages/gitbook/e2e/util.ts

@@ -143,7 +143,10 @@ export const headerLinks: CustomizationHeaderItem[] = [
 
 export async function waitForCookiesDialog(page: Page) {
     const dialog = page.getByTestId('cookies-dialog');
-    await expect(dialog).toBeVisible();
+    await expect(dialog).toBeVisible({
+        // Cookies dialog may take some times to appear
+        timeout: 10_000,
+    });
 }
 
 export async function waitForNotFound(_page: Page, response: Response | null) {

packages/gitbook/src/lib/document-sections.ts

@@ -1,16 +1,17 @@
 import type { GitBookAnyContext } from '@/lib/context';
 import type { DocumentBlock, JSONDocument } from '@gitbook/api';
 
+import type { ReactNode } from 'react';
 import { getDataOrNull } from './data';
-import { getNodeText } from './document';
+import { getNodeReactText } from './document';
 import { resolveOpenAPIOperationBlock } from './openapi/resolveOpenAPIOperationBlock';
 import { resolveOpenAPISchemasBlock } from './openapi/resolveOpenAPISchemasBlock';
 import { resolveContentRef } from './references';
 
 export interface DocumentSection {
     id: string;
     tag?: string;
-    title: string;
+    title: ReactNode;
     depth: number;
     deprecated?: boolean;
 }
@@ -44,7 +45,7 @@ async function getSectionsFromNodes(
                     continue;
                 }
                 depth = 1;
-                const title = getNodeText(block);
+                const title = getNodeReactText(block);
                 sections.push({
                     id,
                     title,
@@ -57,7 +58,7 @@ async function getSectionsFromNodes(
                 if (!id) {
                     continue;
                 }
-                const title = getNodeText(block);
+                const title = getNodeReactText(block);
                 sections.push({
                     id,
                     title,

packages/gitbook/src/lib/document.ts renamed to packages/gitbook/src/lib/document.tsx

@@ -1,3 +1,4 @@
+import { Emoji } from '@/components/primitives';
 import type {
     DocumentBlock,
     DocumentFragment,
@@ -6,6 +7,7 @@ import type {
     JSONDocument,
 } from '@gitbook/api';
 import assertNever from 'assert-never';
+import { Fragment } from 'react';
 
 export interface DocumentSection {
     id: string;
@@ -88,6 +90,29 @@ export function getNodeText(
     }
 }
 
+/**
+ * Get the text of a block/inline as ReactNode.
+ */
+export function getNodeReactText(
+    node: JSONDocument | DocumentText | DocumentFragment | DocumentInline | DocumentBlock
+): React.ReactNode {
+    if (node.object === 'inline' && node.type === 'emoji') {
+        return <Emoji code={node.data.code} />;
+    }
+
+    if (node.object === 'text') {
+        return getNodeText(node);
+    }
+
+    if (!('nodes' in node)) {
+        return null;
+    }
+
+    return node.nodes.map((child, index) => {
+        return <Fragment key={child.key ?? `idx-${index}`}>{getNodeReactText(child)}</Fragment>;
+    });
+}
+
 /**
  * Get a fragment by its type in a node.
  */