🚀(app-impress) add template builder editor

We add the template builder editor to
the template feature.
It will be used to create and edit templates.

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -45,6 +45,35 @@ export const createPad = async (
   return randomPads;
 };
 
+export const createTemplate = async (
+  page: Page,
+  templateName: string,
+  browserName: string,
+  length: number,
+) => {
+  const menu = page.locator('menu').first();
+  await menu.getByLabel(`Template button`).click();
+
+  const panel = page.getByLabel('Templates panel').first();
+  const buttonCreate = page.getByRole('button', {
+    name: 'Create the template',
+  });
+
+  const randomTemplates = randomName(templateName, browserName, length);
+
+  for (let i = 0; i < randomTemplates.length; i++) {
+    await panel.getByRole('button', { name: 'Add a template' }).click();
+    await page.getByText('Template name').fill(randomTemplates[i]);
+    await expect(buttonCreate).toBeEnabled();
+    await buttonCreate.click();
+    await expect(
+      panel.locator('li').getByText(randomTemplates[i]),
+    ).toBeVisible();
+  }
+
+  return randomTemplates;
+};
+
 export const addNewMember = async (
   page: Page,
   index: number,

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

@@ -10,6 +10,7 @@ test.beforeEach(async ({ page, browserName }) => {
 test.describe('Menu', () => {
   const menuItems = [
     { name: 'Search', isDefault: true },
+    { name: 'Template', isDefault: false },
     { name: 'Favorite', isDefault: false },
     { name: 'Recent', isDefault: false },
     { name: 'Contacts', isDefault: false },

src/frontend/apps/e2e/__tests__/app-impress/template-editor.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+import { createTemplate, keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Template Editor', () => {
+  test('checks the template editor interact correctly', async ({
+    page,
+    browserName,
+  }) => {
+    const randomTemplate = await createTemplate(
+      page,
+      'template-editor',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomTemplate[0])).toBeVisible();
+
+    await page.getByTitle('Open Blocks').click();
+    await expect(
+      page.locator('.gjs-editor .gjs-block[title="Text"]'),
+    ).toBeVisible();
+  });
+});

src/frontend/apps/impress/package.json

@@ -19,6 +19,7 @@
     "@blocknote/react": "0.12.4",
     "@openfun/cunningham-react": "2.7.0",
     "@tanstack/react-query": "5.28.14",
+    "grapesjs-blocks-basic": "1.0.2",
     "i18next": "23.10.1",
     "lodash": "4.17.21",
     "luxon": "3.4.4",
@@ -34,6 +35,7 @@
     "zustand": "4.5.2"
   },
   "devDependencies": {
+    "@grapesjs/react": "1.0.0",
     "@svgr/webpack": "8.1.0",
     "@tanstack/react-query-devtools": "5.28.14",
     "@testing-library/jest-dom": "6.4.2",
@@ -48,6 +50,7 @@
     "dotenv": "16.4.5",
     "eslint-config-impress": "*",
     "fetch-mock": "9.11.0",
+    "grapesjs": "0.21.10",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "node-fetch": "2.7.0",

src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx

@@ -0,0 +1,35 @@
+import GjsEditor from '@grapesjs/react';
+import grapesjs, { Editor, ProjectData } from 'grapesjs';
+import 'grapesjs/dist/css/grapes.min.css';
+import pluginBlocksBasic from 'grapesjs-blocks-basic';
+
+import { Card, Text } from '@/components';
+
+import { useUpdateTemplateCodeEditor } from '../api/useUpdateTemplateCodeEditor';
+import { Template } from '../types';
+
+interface TemplateEditorProps {
+  template: Template;
+}
+
+export const TemplateEditor = ({ template }: TemplateEditorProps) => {
+  const onEditor = (editor: Editor) => {};
+
+  return (
+    <>
+      <Text as="h2" $align="center">
+        {template.title}
+      </Text>
+      <Card className="m-b p-b" $css="margin-top:0;flex:1;" $overflow="auto">
+        <GjsEditor
+          grapesjs={grapesjs}
+          options={{
+            storageManager: false,
+          }}
+          plugins={[(editor) => pluginBlocksBasic(editor, {})]}
+          onEditor={onEditor}
+        />
+      </Card>
+    </>
+  );
+};