From 6c76f7faabb9c1a7a62f60888d6c52857c160aed Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Thu, 6 Jun 2024 12:20:02 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20improve=20html?=
 =?UTF-8?q?=20for=20pdf?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Blocknote json to html is not perfect, so we need
to improve it to provide a better html for
the pdf generation.
It is the first step to improve the html,
we will continue to improve it in the future.
We have now the break line.
It is e2e tested so if blocknote change the conversion
we will know it.
---
 .../__tests__/app-impress/pad-tools.spec.ts   | 39 +++++++++++++++++++
 .../pads/pad-tools/components/ModalPDF.tsx    |  5 ++-
 .../src/features/pads/pad-tools/utils.ts      |  4 ++
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/pad-tools.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/pad-tools.spec.ts
index 74e662b5..72554398 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/pad-tools.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/pad-tools.spec.ts
@@ -47,6 +47,45 @@ test.describe('Pad Tools', () => {
     expect(pdfText).toContain('Hello World'); // This is the pad text
   });
 
+  test('it converts the blocknote json in correct html for the pdf', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomPad] = await createPad(page, 'pad-editor', browserName, 1);
+    let body = '';
+
+    await page.route('**/templates/*/generate-document/', async (route) => {
+      const request = route.request();
+      body = request.postDataJSON().body;
+
+      await route.continue();
+    });
+
+    await expect(page.locator('h2').getByText(randomPad)).toBeVisible();
+
+    await page.locator('.bn-block-outer').last().fill('Hello World');
+    await page.locator('.bn-block-outer').last().click();
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('Enter');
+    await page.locator('.bn-block-outer').last().fill('Break');
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Generate PDF',
+      })
+      .click();
+
+    await page
+      .getByRole('button', {
+        name: 'Download',
+      })
+      .click();
+
+    // Empty paragraph should be replaced by a <br/>
+    expect(body).toContain('<br/><br/>');
+  });
+
   test('it updates the pad', async ({ page, browserName }) => {
     const [randomPad] = await createPad(
       page,
diff --git a/src/frontend/apps/impress/src/features/pads/pad-tools/components/ModalPDF.tsx b/src/frontend/apps/impress/src/features/pads/pad-tools/components/ModalPDF.tsx
index 08ea4d3d..e455ed59 100644
--- a/src/frontend/apps/impress/src/features/pads/pad-tools/components/ModalPDF.tsx
+++ b/src/frontend/apps/impress/src/features/pads/pad-tools/components/ModalPDF.tsx
@@ -15,7 +15,7 @@ import { usePadStore } from '@/features/pads/pad-editor/';
 import { Pad } from '@/features/pads/pad-management';
 
 import { useCreatePdf } from '../api/useCreatePdf';
-import { downloadFile } from '../utils';
+import { adaptBlockNoteHTML, downloadFile } from '../utils';
 
 interface ModalPDFProps {
   onClose: () => void;
@@ -84,7 +84,8 @@ export const ModalPDF = ({ onClose, templateOptions, pad }: ModalPDFProps) => {
       return;
     }
 
-    const body = await editor.blocksToHTMLLossy(editor.document);
+    let body = await editor.blocksToHTMLLossy(editor.document);
+    body = adaptBlockNoteHTML(body);
 
     createPdf({
       templateId: templateIdSelected,
diff --git a/src/frontend/apps/impress/src/features/pads/pad-tools/utils.ts b/src/frontend/apps/impress/src/features/pads/pad-tools/utils.ts
index 27ee2ba6..c07ebf9d 100644
--- a/src/frontend/apps/impress/src/features/pads/pad-tools/utils.ts
+++ b/src/frontend/apps/impress/src/features/pads/pad-tools/utils.ts
@@ -9,3 +9,7 @@ export function downloadFile(blob: Blob, filename: string) {
   document.body.removeChild(a);
   window.URL.revokeObjectURL(url);
 }
+
+export const adaptBlockNoteHTML = (html: string) => {
+  return html.replaceAll('<p class="bn-inline-content"></p>', '<br/>');
+};