✨(frontend) add pdf outline property to enable bookmarks display

allows pdf viewers like adobe reader to display bookmarks in the sidebar

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

CHANGELOG.md

@@ -22,6 +22,11 @@ and this project adheres to
 - ♿(frontend) improve accessibility:
   - ✨ add document visible in list and openable via enter key #1365
 
+### Changed
+
+- ♿(frontend) improve accessibility:
+  - ♿ add pdf outline property to enable bookmarks display #1368
+
 ## [3.7.0] - 2025-09-12
 
 ### Added

src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/headingPDF.tsx

@@ -2,16 +2,45 @@ import { Text } from '@react-pdf/renderer';
 
 import { DocsExporterPDF } from '../types';
 
+// Helper function to extract plain text from block content
+function extractTextFromBlockContent(content: unknown[]): string {
+  return content
+    .map((item) => {
+      if (
+        typeof item === 'object' &&
+        item !== null &&
+        'type' in item &&
+        'text' in item
+      ) {
+        if (item.type === 'text' && typeof item.text === 'string') {
+          return item.text;
+        }
+      }
+      return '';
+    })
+    .join('')
+    .trim();
+}
+
 export const blockMappingHeadingPDF: DocsExporterPDF['mappings']['blockMapping']['heading'] =
   (block, exporter) => {
     const PIXELS_PER_POINT = 0.75;
     const MERGE_RATIO = 7.5;
     const FONT_SIZE = 16;
     const fontSizeEM =
       block.props.level === 1 ? 2 : block.props.level === 2 ? 1.5 : 1.17;
+
+    // Extract plain text for bookmark title
+    const bookmarkTitle =
+      extractTextFromBlockContent(block.content) || 'Untitled';
+
     return (
       <Text
         key={block.id}
+        // @ts-expect-error: bookmark is supported by react-pdf but not typed
+        bookmark={{
+          title: bookmarkTitle,
+        }}
         style={{
           fontSize: fontSizeEM * FONT_SIZE * PIXELS_PER_POINT,
           fontWeight: 700,

src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx

@@ -98,9 +98,12 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         exportDocument,
       )) as React.ReactElement<DocumentProps>;
 
-      // Inject language for screen reader support
+      // Inject language for screen reader support and enable outlines (bookmarks)
       const pdfDocument = isValidElement(rawPdfDocument)
-        ? cloneElement(rawPdfDocument, { language: i18next.language })
+        ? cloneElement(rawPdfDocument, {
+            language: i18next.language,
+            pageMode: 'useOutlines',
+          })
         : rawPdfDocument;
 
       blobExport = await pdf(pdfDocument).toBlob();