🚀(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/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>
+    </>
+  );
+};