From 6eb0ac99e4d3ec739e123ace56604cd171debbb4 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 2 Aug 2024 14:25:19 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(frontend)=20better=20conversion=20?=
 =?UTF-8?q?editor=20to=20pdf?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A recent update from Blocknote provides us the
alignment, the color and the background color of
the different editor texts. We adapt our converter
to adapt these new features to the pdf.
---
 CHANGELOG.md                                  |  4 ++++
 .../__tests__/app-impress/doc-tools.spec.ts   | 20 ++++++++++++++++++-
 .../docs/doc-header/components/ModalPDF.tsx   |  2 +-
 .../src/features/docs/doc-header/utils.ts     | 12 ++++++++++-
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 37353540e..708cde874 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+## Added
+
+- 🎨(frontend) better conversion editor to pdf #151
+
 ## [1.1.0] - 2024-07-15
 
 ## Added
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-tools.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-tools.spec.ts
index 3c6d1c20d..961840956 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-tools.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-tools.spec.ts
@@ -67,6 +67,21 @@ test.describe('Doc Tools', () => {
     await page.keyboard.press('Enter');
     await page.keyboard.press('Enter');
     await page.locator('.bn-block-outer').last().fill('Break');
+    await expect(page.getByText('Break')).toBeVisible();
+
+    // Center the text
+    await page.getByText('Break').dblclick();
+    await page.locator('button[data-test="alignTextCenter"]').click();
+
+    // Change the background color
+    await page.getByText('Break').dblclick();
+    await page.locator('button[data-test="colors"]').click();
+    await page.locator('button[data-test="background-color-brown"]').click();
+
+    // Change the text color
+    await page.getByText('Break').dblclick();
+    await page.locator('button[data-test="colors"]').click();
+    await page.locator('button[data-test="text-color-orange"]').click();
 
     await page.getByLabel('Open the document options').click();
     await page
@@ -82,7 +97,10 @@ test.describe('Doc Tools', () => {
       .click();
 
     // Empty paragraph should be replaced by a <br/>
-    expect(body).toContain('<br/><br/>');
+    expect(body.match(/<br\/>/g)?.length).toBeGreaterThanOrEqual(2);
+    expect(body).toContain('style="color: orange;"');
+    expect(body).toContain('style="text-align: center;"');
+    expect(body).toContain('style="background-color: brown;"');
   });
 
   test('it updates the doc', async ({ page, browserName }) => {
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalPDF.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalPDF.tsx
index 055b8ce58..eb4d98508 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalPDF.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalPDF.tsx
@@ -104,7 +104,7 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
       return;
     }
 
-    let body = await editor.blocksToHTMLLossy(editor.document);
+    let body = await editor.blocksToFullHTML(editor.document);
     body = adaptBlockNoteHTML(body);
 
     createPdf({
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/utils.ts b/src/frontend/apps/impress/src/features/docs/doc-header/utils.ts
index c07ebf9d7..8918bc00a 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/utils.ts
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/utils.ts
@@ -11,5 +11,15 @@ export function downloadFile(blob: Blob, filename: string) {
 }
 
 export const adaptBlockNoteHTML = (html: string) => {
-  return html.replaceAll('<p class="bn-inline-content"></p>', '<br/>');
+  html = html.replaceAll('<p class="bn-inline-content"></p>', '<br/>');
+  html = html.replaceAll(
+    /data-text-alignment=\"([a-z]+)\"/g,
+    'style="text-align: $1;"',
+  );
+  html = html.replaceAll(/data-text-color=\"([a-z]+)\"/g, 'style="color: $1;"');
+  html = html.replaceAll(
+    /data-background-color=\"([a-z]+)\"/g,
+    'style="background-color: $1;"',
+  );
+  return html;
 };