♻️(frontend) export to docx

We can now export the document to docx format.
We adapted the frontend to be able to choose
between pdf or docx export.

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

@@ -0,0 +1,240 @@
+import { expect, test } from '@playwright/test';
+import cs from 'convert-stream';
+import jsdom from 'jsdom';
+import pdf from 'pdf-parse';
+
+import { createDoc } from './common';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Doc Export', () => {
+  test('it converts the doc to pdf with a template integrated', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(page, 'doc-editor', browserName, 1);
+
+    const downloadPromise = page.waitForEvent('download', (download) => {
+      return download.suggestedFilename().includes(`${randomDoc}.pdf`);
+    });
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+
+    await page.locator('.ProseMirror.bn-editor').click();
+    await page.locator('.ProseMirror.bn-editor').fill('Hello World');
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Export',
+      })
+      .click();
+
+    await page
+      .getByRole('button', {
+        name: 'Download',
+      })
+      .click();
+
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
+
+    const pdfBuffer = await cs.toBuffer(await download.createReadStream());
+    const pdfText = (await pdf(pdfBuffer)).text;
+
+    expect(pdfText).toContain('Hello World'); // This is the doc text
+  });
+
+  test('it converts the doc to docx with a template integrated', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(page, 'doc-editor', browserName, 1);
+
+    const downloadPromise = page.waitForEvent('download', (download) => {
+      return download.suggestedFilename().includes(`${randomDoc}.docx`);
+    });
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+
+    await page.locator('.ProseMirror.bn-editor').click();
+    await page.locator('.ProseMirror.bn-editor').fill('Hello World');
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Export',
+      })
+      .click();
+
+    await page.getByText('Docx').click();
+
+    await page
+      .getByRole('button', {
+        name: 'Download',
+      })
+      .click();
+
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toBe(`${randomDoc}.docx`);
+  });
+
+  test('it converts the blocknote json in correct html for the export', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(page, 'doc-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(randomDoc)).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 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();
+
+    // Add a list
+    await page.locator('.bn-block-outer').last().click();
+    await page.keyboard.press('Enter');
+    await page.locator('.bn-block-outer').last().fill('Test List 1');
+    await page.getByText('Test List 1').dblclick();
+    await page
+      .getByRole('button', {
+        name: 'Paragraph',
+      })
+      .click();
+    await page
+      .getByRole('menuitem', {
+        name: 'Bullet List',
+      })
+      .click();
+    await page
+      .locator('.bn-block-content[data-content-type="bulletListItem"]')
+      .last()
+      .click();
+    await page.keyboard.press('Enter');
+    await page
+      .locator('.bn-block-content[data-content-type="bulletListItem"] p')
+      .last()
+      .fill('Test List 2');
+    await page.keyboard.press('Enter');
+    await page
+      .locator('.bn-block-content[data-content-type="bulletListItem"] p')
+      .last()
+      .fill('Test List 3');
+
+    // Add a number list
+    await page.locator('.bn-block-outer').last().click();
+    await page.keyboard.press('Enter');
+    await page.locator('.bn-block-outer').last().fill('Test Number 1');
+    await page.getByText('Test Number 1').dblclick();
+    await page
+      .getByRole('button', {
+        name: 'Paragraph',
+      })
+      .click();
+    await page
+      .getByRole('menuitem', {
+        name: 'Numbered List',
+      })
+      .click();
+    await page
+      .locator('.bn-block-content[data-content-type="numberedListItem"]')
+      .last()
+      .click();
+    await page.keyboard.press('Enter');
+    await page
+      .locator('.bn-block-content[data-content-type="numberedListItem"] p')
+      .last()
+      .fill('Test Number 2');
+    await page.keyboard.press('Enter');
+    await page
+      .locator('.bn-block-content[data-content-type="numberedListItem"] p')
+      .last()
+      .fill('Test Number 3');
+
+    // Add img
+    await page.locator('.bn-block-outer').last().click();
+    await page.keyboard.press('Enter');
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page
+      .getByRole('option', {
+        name: 'Image',
+      })
+      .click();
+    await page
+      .getByPlaceholder('Enter URL')
+      .fill('https://example.com/image.jpg');
+    await page
+      .getByRole('button', {
+        name: 'Embed image',
+      })
+      .click();
+
+    // Download
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Export',
+      })
+      .click();
+
+    await page
+      .getByRole('button', {
+        name: 'Download',
+      })
+      .click();
+
+    // Empty paragraph should be replaced by a <br/>
+    expect(body.match(/<br>/g)?.length).toBeGreaterThanOrEqual(2);
+    expect(body).toContain('style="color: orange;"');
+    expect(body).toContain('custom-style="center"');
+    expect(body).toContain('style="background-color: brown;"');
+
+    const { JSDOM } = jsdom;
+    const DOMParser = new JSDOM().window.DOMParser;
+    const parser = new DOMParser();
+    const html = parser.parseFromString(body, 'text/html');
+
+    const ulLis = html.querySelectorAll('ul li');
+    expect(ulLis.length).toBe(3);
+    expect(ulLis[0].textContent).toBe('Test List 1');
+    expect(ulLis[1].textContent).toBe('Test List 2');
+    expect(ulLis[2].textContent).toBe('Test List 3');
+
+    const olLis = html.querySelectorAll('ol li');
+    expect(olLis.length).toBe(3);
+    expect(olLis[0].textContent).toBe('Test Number 1');
+    expect(olLis[1].textContent).toBe('Test Number 2');
+    expect(olLis[2].textContent).toBe('Test Number 3');
+
+    const img = html.querySelectorAll('img');
+    expect(img.length).toBe(1);
+    expect(img[0].src).toBe('https://example.com/image.jpg');
+  });
+});

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { goToGridDoc, mockedDocument } from './common';
+import { createDoc, goToGridDoc, mockedDocument } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -63,4 +63,194 @@ test.describe('Doc Header', () => {
     await expect(card.getByText('Your role: Owner')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
   });
+
+  test('it updates the doc', async ({ page, browserName }) => {
+    const [randomDoc] = await createDoc(
+      page,
+      'doc-update',
+      browserName,
+      1,
+      true,
+    );
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Update document',
+      })
+      .click();
+
+    await expect(
+      page.locator('h2').getByText(`Update document "${randomDoc}"`),
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole('checkbox', { name: 'Is it public ?' }),
+    ).toBeChecked();
+
+    await page.getByText('Document name').fill(`${randomDoc}-updated`);
+    await page.getByText('Is it public ?').click();
+
+    await page
+      .getByRole('button', {
+        name: 'Validate the modification',
+      })
+      .click();
+
+    await expect(
+      page.getByText('The document has been updated.'),
+    ).toBeVisible();
+
+    const docTitle = await goToGridDoc(page, {
+      title: `${randomDoc}-updated`,
+    });
+
+    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Update document',
+      })
+      .click();
+
+    await expect(
+      page.getByRole('checkbox', { name: 'Is it public ?' }),
+    ).not.toBeChecked();
+  });
+
+  test('it deletes the doc', async ({ page, browserName }) => {
+    const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1);
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Delete document',
+      })
+      .click();
+
+    await expect(
+      page.locator('h2').getByText(`Deleting the document "${randomDoc}"`),
+    ).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Confirm deletion',
+      })
+      .click();
+
+    await expect(
+      page.getByText('The document has been deleted.'),
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole('button', { name: 'Create a new document' }),
+    ).toBeVisible();
+
+    const row = page
+      .getByLabel('Datagrid of the documents page 1')
+      .getByRole('table')
+      .getByRole('row')
+      .filter({
+        hasText: randomDoc,
+      });
+
+    expect(await row.count()).toBe(0);
+  });
+
+  test('it checks the options available if administrator', async ({ page }) => {
+    await mockedDocument(page, {
+      abilities: {
+        destroy: false, // Means not owner
+        versions_destroy: true,
+        versions_list: true,
+        versions_retrieve: true,
+        manage_accesses: true, // Means admin
+        update: true,
+        partial_update: true,
+        retrieve: true,
+      },
+    });
+
+    await goToGridDoc(page);
+
+    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
+
+    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+
+    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Update document' }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Delete document' }),
+    ).toBeHidden();
+  });
+
+  test('it checks the options available if editor', async ({ page }) => {
+    await mockedDocument(page, {
+      abilities: {
+        destroy: false, // Means not owner
+        versions_destroy: true,
+        versions_list: true,
+        versions_retrieve: true,
+        manage_accesses: false, // Means not admin
+        update: true,
+        partial_update: true, // Means editor
+        retrieve: true,
+      },
+    });
+
+    await goToGridDoc(page);
+
+    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
+
+    await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
+
+    await page.getByLabel('Open the document options').click();
+
+    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Update document' }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Delete document' }),
+    ).toBeHidden();
+  });
+
+  test('it checks the options available if reader', async ({ page }) => {
+    await mockedDocument(page, {
+      abilities: {
+        destroy: false, // Means not owner
+        versions_destroy: false,
+        versions_list: true,
+        versions_retrieve: true,
+        manage_accesses: false, // Means not admin
+        update: false,
+        partial_update: false, // Means not editor
+        retrieve: true,
+      },
+    });
+
+    await goToGridDoc(page);
+
+    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
+
+    await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
+
+    await page.getByLabel('Open the document options').click();
+
+    await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
+    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Update document' }),
+    ).toBeHidden();
+    await expect(
+      page.getByRole('button', { name: 'Delete document' }),
+    ).toBeHidden();
+  });
 });

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

@@ -1,301 +0,0 @@
-import { expect, test } from '@playwright/test';
-import cs from 'convert-stream';
-import pdf from 'pdf-parse';
-
-import { createDoc, goToGridDoc, mockedDocument } from './common';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('/');
-});
-
-test.describe('Doc Tools', () => {
-  test('it converts the doc to pdf with a template integrated', async ({
-    page,
-    browserName,
-  }) => {
-    const [randomDoc] = await createDoc(page, 'doc-editor', browserName, 1);
-
-    const downloadPromise = page.waitForEvent('download', (download) => {
-      return download.suggestedFilename().includes(`${randomDoc}.pdf`);
-    });
-
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
-
-    await page.locator('.ProseMirror.bn-editor').click();
-    await page.locator('.ProseMirror.bn-editor').fill('Hello World');
-
-    await page.getByLabel('Open the document options').click();
-    await page
-      .getByRole('button', {
-        name: 'Generate PDF',
-      })
-      .click();
-
-    await page
-      .getByRole('button', {
-        name: 'Download',
-      })
-      .click();
-
-    const download = await downloadPromise;
-    expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
-
-    const pdfBuffer = await cs.toBuffer(await download.createReadStream());
-    const pdfText = (await pdf(pdfBuffer)).text;
-
-    expect(pdfText).toContain('Hello World'); // This is the doc text
-  });
-
-  test('it converts the blocknote json in correct html for the pdf', async ({
-    page,
-    browserName,
-  }) => {
-    const [randomDoc] = await createDoc(page, 'doc-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(randomDoc)).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 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
-      .getByRole('button', {
-        name: 'Generate PDF',
-      })
-      .click();
-
-    await page
-      .getByRole('button', {
-        name: 'Download',
-      })
-      .click();
-
-    // Empty paragraph should be replaced by a <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 }) => {
-    const [randomDoc] = await createDoc(
-      page,
-      'doc-update',
-      browserName,
-      1,
-      true,
-    );
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
-
-    await page.getByLabel('Open the document options').click();
-    await page
-      .getByRole('button', {
-        name: 'Update document',
-      })
-      .click();
-
-    await expect(
-      page.locator('h2').getByText(`Update document "${randomDoc}"`),
-    ).toBeVisible();
-
-    await expect(
-      page.getByRole('checkbox', { name: 'Is it public ?' }),
-    ).toBeChecked();
-
-    await page.getByText('Document name').fill(`${randomDoc}-updated`);
-    await page.getByText('Is it public ?').click();
-
-    await page
-      .getByRole('button', {
-        name: 'Validate the modification',
-      })
-      .click();
-
-    await expect(
-      page.getByText('The document has been updated.'),
-    ).toBeVisible();
-
-    const docTitle = await goToGridDoc(page, {
-      title: `${randomDoc}-updated`,
-    });
-
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
-
-    await page.getByLabel('Open the document options').click();
-    await page
-      .getByRole('button', {
-        name: 'Update document',
-      })
-      .click();
-
-    await expect(
-      page.getByRole('checkbox', { name: 'Is it public ?' }),
-    ).not.toBeChecked();
-  });
-
-  test('it deletes the doc', async ({ page, browserName }) => {
-    const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1);
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
-
-    await page.getByLabel('Open the document options').click();
-    await page
-      .getByRole('button', {
-        name: 'Delete document',
-      })
-      .click();
-
-    await expect(
-      page.locator('h2').getByText(`Deleting the document "${randomDoc}"`),
-    ).toBeVisible();
-
-    await page
-      .getByRole('button', {
-        name: 'Confirm deletion',
-      })
-      .click();
-
-    await expect(
-      page.getByText('The document has been deleted.'),
-    ).toBeVisible();
-
-    await expect(
-      page.getByRole('button', { name: 'Create a new document' }),
-    ).toBeVisible();
-
-    const row = page
-      .getByLabel('Datagrid of the documents page 1')
-      .getByRole('table')
-      .getByRole('row')
-      .filter({
-        hasText: randomDoc,
-      });
-
-    expect(await row.count()).toBe(0);
-  });
-
-  test('it checks the options available if administrator', async ({ page }) => {
-    await mockedDocument(page, {
-      abilities: {
-        destroy: false, // Means not owner
-        versions_destroy: true,
-        versions_list: true,
-        versions_retrieve: true,
-        manage_accesses: true, // Means admin
-        update: true,
-        partial_update: true,
-        retrieve: true,
-      },
-    });
-
-    await goToGridDoc(page);
-
-    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
-
-    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
-
-    await page.getByLabel('Open the document options').click();
-
-    await expect(
-      page.getByRole('button', { name: 'Generate PDF' }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: 'Update document' }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
-  });
-
-  test('it checks the options available if editor', async ({ page }) => {
-    await mockedDocument(page, {
-      abilities: {
-        destroy: false, // Means not owner
-        versions_destroy: true,
-        versions_list: true,
-        versions_retrieve: true,
-        manage_accesses: false, // Means not admin
-        update: true,
-        partial_update: true, // Means editor
-        retrieve: true,
-      },
-    });
-
-    await goToGridDoc(page);
-
-    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
-
-    await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
-
-    await page.getByLabel('Open the document options').click();
-
-    await expect(
-      page.getByRole('button', { name: 'Generate PDF' }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: 'Update document' }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
-  });
-
-  test('it checks the options available if reader', async ({ page }) => {
-    await mockedDocument(page, {
-      abilities: {
-        destroy: false, // Means not owner
-        versions_destroy: false,
-        versions_list: true,
-        versions_retrieve: true,
-        manage_accesses: false, // Means not admin
-        update: false,
-        partial_update: false, // Means not editor
-        retrieve: true,
-      },
-    });
-
-    await goToGridDoc(page);
-
-    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
-
-    await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
-
-    await page.getByLabel('Open the document options').click();
-
-    await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
-    await expect(
-      page.getByRole('button', { name: 'Generate PDF' }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: 'Update document' }),
-    ).toBeHidden();
-    await expect(
-      page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
-  });
-});

src/frontend/apps/e2e/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "convert-stream": "1.0.2",
+    "jsdom": "24.1.1",
     "pdf-parse": "^1.1.1"
   }
 }