🚸(app-impress) add warning when body tag not in template

In order to work with the pad, the body tag
must be in the template.
This commit adds a warning to the template editor
when the body tag is not in the template.

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

@@ -31,6 +31,12 @@ test.describe('Template Editor', () => {
     page,
     browserName,
   }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(
+      browserName !== 'chromium',
+      'This test failed with safary because of the dragNdrop',
+    );
+
     const randomTemplate = await createTemplate(
       page,
       'template-editor',
@@ -64,6 +70,12 @@ test.describe('Template Editor', () => {
     page,
     browserName,
   }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(
+      browserName !== 'chromium',
+      'This test failed with safary because of the dragNdrop',
+    );
+
     const randomTemplate = await createTemplate(
       page,
       'template-html',
@@ -86,4 +98,42 @@ test.describe('Template Editor', () => {
     await page.getByText('Save template').click();
     await expect(page.getByText('Template save successfully')).toBeVisible();
   });
+
+  test('it shows a warning if body tag not present', async ({
+    page,
+    browserName,
+  }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(
+      browserName !== 'chromium',
+      'This test failed with safary because of the dragNdrop',
+    );
+
+    const randomTemplate = await createTemplate(
+      page,
+      'template-html',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomTemplate[0])).toBeVisible();
+
+    await expect(
+      page.getByText('The {{body}} tag is necessary to works with the pads.'),
+    ).toBeVisible();
+
+    const iframe = page.frameLocator('iFrame.gjs-frame');
+
+    await page.getByTitle('Open Blocks').click();
+    await page
+      .locator('.gjs-editor .gjs-block[title="Text"]')
+      .dragTo(iframe.locator('body.gjs-dashed'));
+
+    await iframe.getByText('Insert your text here').fill('{{body}}');
+    await iframe.locator('body.gjs-dashed').click();
+
+    await expect(
+      page.getByText('The {{body}} tag is necessary to works with the pads.'),
+    ).toBeHidden();
+  });
 });

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

@@ -1,5 +1,6 @@
 import GjsEditor from '@grapesjs/react';
 import {
+  Alert,
   Button,
   VariantType,
   useToastProvider,
@@ -30,6 +31,17 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
     },
   });
   const [editor, setEditor] = useState<Editor>();
+  const [showWarning, setShowWarning] = useState(false);
+
+  const html = editor?.getHtml();
+
+  useEffect(() => {
+    if (showWarning || !html) {
+      return;
+    }
+
+    setShowWarning(html.includes('{{body}}') === false);
+  }, [html, showWarning]);
 
   useEffect(() => {
     if (!editor?.loadProjectData) {
@@ -84,14 +96,26 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
               updateTemplate({
                 id: template.id,
                 css: editor.getCss(),
-                html: editor.getHtml(),
+                html,
               });
             }
           }}
         >
           {t('Save template')}
         </Button>
       </Box>
+      {showWarning && html && (
+        <Box
+          className="m-b"
+          $css="margin-top:0;"
+          $effect={html.includes('{{body}}') ? 'hide' : 'show'}
+        >
+          <Alert
+            type={VariantType.WARNING}
+          >{`The {{body}} tag is necessary to works with the pads.`}</Alert>
+        </Box>
+      )}
+
       <Box className="m-b" $css="margin-top:0;flex:1;" $overflow="auto">
         <GjsEditor
           grapesjs={grapesjs}