🎨(frontend) better conversion editor to pdf

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

@@ -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

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 }) => {

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({

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;
 };