✨(frontend) interlinking export

Create interlinking link mapping for docx and pdf export.

Author: AntoLC

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -311,4 +311,72 @@ test.describe('Doc Export', () => {
     const pdfData = await pdf(pdfBuffer);
     expect(pdfData.text).toContain('Hello World');
   });
+
+  test('it exports the doc with interlinking', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(
+      page,
+      'export-interlinking',
+      browserName,
+      1,
+    );
+
+    await verifyDocName(page, randomDoc);
+
+    const [docChild] = await createDoc(
+      page,
+      'export-interlink-child',
+      browserName,
+      1,
+      true,
+    );
+
+    await verifyDocName(page, docChild);
+
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Link to a page').first().click();
+
+    await page
+      .locator(
+        "span[data-inline-content-type='interlinkingSearchInline'] input",
+      )
+      .fill('interlink-child');
+
+    await page
+      .locator('.quick-search-container')
+      .getByText('interlink-child')
+      .click();
+
+    const interlink = page.getByRole('link', {
+      name: 'interlink-child',
+    });
+
+    await expect(interlink).toBeVisible();
+
+    const downloadPromise = page.waitForEvent('download', (download) => {
+      return download.suggestedFilename().includes(`${docChild}.pdf`);
+    });
+
+    await page
+      .getByRole('button', {
+        name: 'download',
+      })
+      .click();
+
+    void page
+      .getByRole('button', {
+        name: 'Download',
+      })
+      .click();
+
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toBe(`${docChild}.pdf`);
+
+    const pdfBuffer = await cs.toBuffer(await download.createReadStream());
+    const pdfData = await pdf(pdfBuffer);
+
+    expect(pdfData.text).toContain('interlink-child'); // This is the pdf text
+  });
 });

src/frontend/apps/impress/src/features/docs/doc-export/assets/doc-selected.png

@@ -10,7 +10,7 @@ export const blockMappingParagraphPDF: DocsExporterPDF['mappings']['blockMapping
      */
     if (Array.isArray(block.content)) {
       block.content.forEach((content) => {
-        if (content.type === 'text' && !content.text) {
+        if (content.type === 'text' && 'text' in content && !content.text) {
           content.text = ' ';
         }
       });

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

@@ -8,11 +8,17 @@ export const blockMappingQuoteDocx: DocsExporterDocx['mappings']['blockMapping']
     if (Array.isArray(block.content)) {
       block.content.forEach((content) => {
         if (content.type === 'text') {
-          content.styles = {
-            ...content.styles,
-            italic: true,
-            textColor: 'gray',
-          };
+          if (
+            'styles' in content &&
+            typeof content.styles === 'object' &&
+            content.styles !== null
+          ) {
+            content.styles = {
+              ...content.styles,
+              italic: true,
+              textColor: 'gray',
+            };
+          }
         }
       });
     }

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

@@ -0,0 +1,2 @@
+export * from './interlinkingLinkPDF';
+export * from './interlinkingLinkDocX';

src/frontend/apps/impress/src/features/docs/doc-export/inline-content-mapping/index.ts

@@ -0,0 +1,49 @@
+/* eslint-disable jsx-a11y/alt-text */
+
+import { ExternalHyperlink, ImageRun, Paragraph, TextRun } from 'docx';
+
+import DocSelectedIcon from '../assets/doc-selected.png';
+import { DocsExporterDocx } from '../types';
+
+export const inlineContentMappingInterlinkingLinkDocx: DocsExporterDocx['mappings']['inlineContentMapping']['interlinkingLinkInline'] =
+  (inline) => {
+    const fetchImageData = async () => {
+      const response = await fetch(DocSelectedIcon.src);
+      return response.arrayBuffer();
+    };
+    //const file = new FileReader();
+    //file.readAsArrayBuffer(DocSelectedIcon.src);
+    function dataURItoBlob(dataURI: string) {
+      const byteString = atob(dataURI.split(',')[1]);
+      const ab = new ArrayBuffer(byteString.length);
+      const ia = new Uint8Array(ab);
+      for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+      }
+      const bb = new Blob([ab]);
+      return bb;
+    }
+
+    const imageDataPromise = fetchImageData();
+
+    return new Paragraph({
+      children: [
+        new ExternalHyperlink({
+          children: [
+            new ImageRun({
+              data: dataURItoBlob(DocSelectedIcon.src).arrayBuffer(),
+              transformation: {
+                width: 12,
+                height: 12,
+              },
+            }),
+            new TextRun({
+              text: inline.props.title,
+              style: 'Hyperlink',
+            }),
+          ],
+          link: window.location.origin + inline.props.url,
+        }),
+      ],
+    });
+  };

src/frontend/apps/impress/src/features/docs/doc-export/inline-content-mapping/interlinkingLinkDocx.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable jsx-a11y/alt-text */
+import { Image, Link } from '@react-pdf/renderer';
+
+import DocSelectedIcon from '../assets/doc-selected.png';
+import { DocsExporterPDF } from '../types';
+
+export const inlineContentMappingInterlinkingLinkPDF: DocsExporterPDF['mappings']['inlineContentMapping']['interlinkingLinkInline'] =
+  (inline) => {
+    return (
+      <Link
+        src={window.location.origin + inline.props.url}
+        style={{
+          textDecoration: 'none',
+          color: 'black',
+        }}
+      >
+        {' '}
+        <Image src={DocSelectedIcon.src} />
+        {inline.props.title}{' '}
+      </Link>
+    );
+  };

src/frontend/apps/impress/src/features/docs/doc-export/inline-content-mapping/interlinkingLinkPDF.tsx

@@ -1,10 +1,12 @@
 import { docxDefaultSchemaMappings } from '@blocknote/xl-docx-exporter';
+import { Paragraph } from 'docx';
 
 import {
   blockMappingDividerDocx,
   blockMappingImageDocx,
   blockMappingQuoteDocx,
 } from './blocks-mapping';
+import { inlineContentMappingInterlinkingLinkDocx } from './inline-content-mapping';
 import { DocsExporterDocx } from './types';
 
 export const docxDocsSchemaMappings: DocsExporterDocx['mappings'] = {
@@ -15,4 +17,9 @@ export const docxDocsSchemaMappings: DocsExporterDocx['mappings'] = {
     quote: blockMappingQuoteDocx,
     image: blockMappingImageDocx,
   },
+  inlineContentMapping: {
+    ...docxDefaultSchemaMappings.inlineContentMapping,
+    interlinkingSearchInline: () => new Paragraph(''),
+    interlinkingLinkInline: inlineContentMappingInterlinkingLinkDocx,
+  },
 };

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

@@ -8,6 +8,7 @@ import {
   blockMappingQuotePDF,
   blockMappingTablePDF,
 } from './blocks-mapping';
+import { inlineContentMappingInterlinkingLinkPDF } from './inline-content-mapping';
 import { DocsExporterPDF } from './types';
 
 export const pdfDocsSchemaMappings: DocsExporterPDF['mappings'] = {
@@ -21,4 +22,9 @@ export const pdfDocsSchemaMappings: DocsExporterPDF['mappings'] = {
     quote: blockMappingQuotePDF,
     table: blockMappingTablePDF,
   },
+  inlineContentMapping: {
+    ...pdfDefaultSchemaMappings.inlineContentMapping,
+    interlinkingSearchInline: () => <></>,
+    interlinkingLinkInline: inlineContentMappingInterlinkingLinkPDF,
+  },
 };