✨(frontend) add import document area in docs grid

Add import document area with drag and drop
support in the docs grid component.
We can now import docx and and md files just
by dropping them into the designated area.

We are using the `react-dropzone` library to
handle the drag and drop functionality.

src/frontend/apps/e2e/__tests__/app-impress/assets/test_import.md

@@ -0,0 +1,60 @@
+![473389927-e4ff1794-69f3-460a-85f8-fec993cd74d6.png](http://localhost:3000/assets/logo-suite-numerique.png)![497094770-53e5f8e2-c93e-4a0b-a82f-cd184fd03f51.svg](http://localhost:3000/assets/icon-docs.svg)
+
+# Lorem Ipsum import Document
+
+## Introduction
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.
+
+### Subsection 1.1
+
+* **Bold text**: Lorem ipsum dolor sit amet.
+
+* *Italic text*: Consectetur adipiscing elit.
+
+* ~~Strikethrough text~~: Nullam auctor, nisl eget ultricies tincidunt.
+
+1. First item in an ordered list.
+
+2. Second item in an ordered list.
+
+   * Indented bullet point.
+
+   * Another indented bullet point.
+
+3. Third item in an ordered list.
+
+### Subsection 1.2
+
+**Code block:**
+
+```js
+const hello_world = () => {
+    console.log("Hello, world!");
+}
+```
+
+**Blockquote:**
+
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt.
+
+**Horizontal rule:**
+
+***
+
+**Table:**
+
+| Syntax    | Description |
+| --------- | ----------- |
+| Header    | Title       |
+| Paragraph | Text        |
+
+**Inline code:**
+
+Use the `printf()` function.
+
+**Link:** [Example](http://localhost:3000/)
+
+## Conclusion
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.

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

@@ -0,0 +1,181 @@
+import { readFileSync } from 'fs';
+import path from 'path';
+
+import { Page, expect, test } from '@playwright/test';
+
+import { getEditor } from './utils-editor';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Doc Import', () => {
+  test('it imports 2 docs with the import icon', async ({ page }) => {
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.getByLabel('Open the upload dialog').click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles([
+      path.join(__dirname, 'assets/test_import.docx'),
+      path.join(__dirname, 'assets/test_import.md'),
+    ]);
+
+    await expect(
+      page.getByText(
+        'The document "test_import.docx" has been successfully imported',
+      ),
+    ).toBeVisible();
+    await expect(
+      page.getByText(
+        'The document "test_import.md" has been successfully imported',
+      ),
+    ).toBeVisible();
+
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid.getByText('test_import.docx').first()).toBeVisible();
+    await expect(docsGrid.getByText('test_import.md').first()).toBeVisible();
+
+    // Check content of imported md
+    await docsGrid.getByText('test_import.md').first().click();
+    const editor = await getEditor({ page });
+
+    const contentCheck = async (isMDCheck = false) => {
+      await expect(
+        editor.getByRole('heading', {
+          name: 'Lorem Ipsum import Document',
+          level: 1,
+        }),
+      ).toBeVisible();
+      await expect(
+        editor.getByRole('heading', {
+          name: 'Introduction',
+          level: 2,
+        }),
+      ).toBeVisible();
+      await expect(
+        editor.getByRole('heading', {
+          name: 'Subsection 1.1',
+          level: 3,
+        }),
+      ).toBeVisible();
+      await expect(
+        editor
+          .locator('div[data-content-type="bulletListItem"] strong')
+          .getByText('Bold text'),
+      ).toBeVisible();
+      await expect(
+        editor
+          .locator('div[data-content-type="codeBlock"]')
+          .getByText('hello_world'),
+      ).toBeVisible();
+      await expect(
+        editor
+          .locator('div[data-content-type="table"] td')
+          .getByText('Paragraph'),
+      ).toBeVisible();
+      await expect(
+        editor.locator('a[href="http://localhost:3000/"]').getByText('Example'),
+      ).toBeVisible();
+
+      /* eslint-disable playwright/no-conditional-expect */
+      if (isMDCheck) {
+        await expect(
+          editor.locator(
+            'img[src="http://localhost:3000/assets/logo-suite-numerique.png"]',
+          ),
+        ).toBeVisible();
+        await expect(
+          editor.locator(
+            'img[src="http://localhost:3000/assets/icon-docs.svg"]',
+          ),
+        ).toBeVisible();
+      } else {
+        await expect(editor.locator('img')).toHaveCount(2);
+      }
+      /* eslint-enable playwright/no-conditional-expect */
+
+      /**
+       * Divider are not supported in docx import in DocSpec 2.4.4
+       */
+      /* eslint-disable playwright/no-conditional-expect */
+      if (isMDCheck) {
+        await expect(
+          editor.locator('div[data-content-type="divider"] hr'),
+        ).toBeVisible();
+      }
+      /* eslint-enable playwright/no-conditional-expect */
+    };
+
+    await contentCheck(true);
+
+    // Check content of imported docx
+    await page.getByLabel('Back to homepage').first().click();
+    await docsGrid.getByText('test_import.docx').first().click();
+
+    await contentCheck();
+  });
+
+  test('it imports 2 docs with the drag and drop area', async ({ page }) => {
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid).toBeVisible();
+
+    await dragAndDropFiles(page, "[data-testid='docs-grid']", [
+      {
+        filePath: path.join(__dirname, 'assets/test_import.docx'),
+        fileName: 'test_import.docx',
+        fileType:
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      },
+      {
+        filePath: path.join(__dirname, 'assets/test_import.md'),
+        fileName: 'test_import.md',
+        fileType: 'text/markdown',
+      },
+    ]);
+
+    // Wait for success messages
+    await expect(
+      page.getByText(
+        'The document "test_import.docx" has been successfully imported',
+      ),
+    ).toBeVisible();
+    await expect(
+      page.getByText(
+        'The document "test_import.md" has been successfully imported',
+      ),
+    ).toBeVisible();
+
+    await expect(docsGrid.getByText('test_import.docx').first()).toBeVisible();
+    await expect(docsGrid.getByText('test_import.md').first()).toBeVisible();
+  });
+});
+
+const dragAndDropFiles = async (
+  page: Page,
+  selector: string,
+  files: Array<{ filePath: string; fileName: string; fileType?: string }>,
+) => {
+  const filesData = files.map((file) => ({
+    bufferData: `data:application/octet-stream;base64,${readFileSync(file.filePath).toString('base64')}`,
+    fileName: file.fileName,
+    fileType: file.fileType || '',
+  }));
+
+  const dataTransfer = await page.evaluateHandle(async (filesInfo) => {
+    const dt = new DataTransfer();
+
+    for (const fileInfo of filesInfo) {
+      const blobData = await fetch(fileInfo.bufferData).then((res) =>
+        res.blob(),
+      );
+      const file = new File([blobData], fileInfo.fileName, {
+        type: fileInfo.fileType,
+      });
+      dt.items.add(file);
+    }
+
+    return dt;
+  }, filesData);
+
+  await page.dispatchEvent(selector, 'drop', { dataTransfer });
+};