🚸(frontend) do not show comments button on resources

The comments does not seems to work on
resources (images, pdf, ...), so we hide the button
when the selected block is not a text block.

Author: AntoLC

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

@@ -24,15 +24,13 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe('Doc Editor', () => {
-  test('it checks default toolbar buttons are displayed', async ({
+  test('it checks toolbar buttons are displayed', async ({
     page,
     browserName,
   }) => {
     await createDoc(page, 'doc-toolbar', browserName, 1);
 
-    const editor = page.locator('.ProseMirror');
-    await editor.click();
-    await editor.fill('test content');
+    const editor = await writeInEditor({ page, text: 'test content' });
 
     await editor
       .getByText('test content', {
@@ -41,6 +39,9 @@ test.describe('Doc Editor', () => {
       .selectText();
 
     const toolbar = page.locator('.bn-formatting-toolbar');
+    await expect(
+      toolbar.locator('button[data-test="comment-toolbar-button"]'),
+    ).toBeVisible();
     await expect(toolbar.locator('button[data-test="bold"]')).toBeVisible();
     await expect(toolbar.locator('button[data-test="italic"]')).toBeVisible();
     await expect(
@@ -63,6 +64,53 @@ test.describe('Doc Editor', () => {
     await expect(
       toolbar.locator('button[data-test="createLink"]'),
     ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="ai-actions"]'),
+    ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="convertMarkdown"]'),
+    ).toBeVisible();
+
+    await page.keyboard.press('Escape');
+
+    await page.locator('.bn-block-outer').last().click();
+
+    await page.keyboard.press('Enter');
+
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Resizable image with caption').click();
+    await page.getByText('Upload image').click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(
+      path.join(__dirname, 'assets/logo-suite-numerique.png'),
+    );
+
+    const image = page
+      .locator('.--docs--editor-container img.bn-visual-media')
+      .first();
+
+    await expect(image).toHaveAttribute('role', 'presentation');
+
+    await image.dblclick();
+
+    await expect(
+      toolbar.locator('button[data-test="comment-toolbar-button"]'),
+    ).toBeHidden();
+    await expect(
+      toolbar.locator('button[data-test="ai-actions"]'),
+    ).toBeHidden();
+    await expect(
+      toolbar.locator('button[data-test="convertMarkdown"]'),
+    ).toBeHidden();
+
+    await expect(
+      toolbar.locator('button[data-test="editcaption"]'),
+    ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="downloadfile"]'),
+    ).toBeVisible();
   });
 
   /**

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx

@@ -1,4 +1,9 @@
-import { useBlockNoteEditor, useComponentsContext } from '@blocknote/react';
+import {
+  useBlockNoteEditor,
+  useComponentsContext,
+  useSelectedBlocks,
+} from '@blocknote/react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
@@ -24,7 +29,18 @@ export const CommentToolbarButton = () => {
     DocsStyleSchema
   >();
 
-  if (!editor.isEditable || !Components || !currentDoc?.abilities.comment) {
+  const selectedBlocks = useSelectedBlocks(editor);
+
+  const show = useMemo(() => {
+    return !!selectedBlocks.find((block) => block.content !== undefined);
+  }, [selectedBlocks]);
+
+  if (
+    !show ||
+    !editor.isEditable ||
+    !Components ||
+    !currentDoc?.abilities.comment
+  ) {
     return null;
   }
 
@@ -34,8 +50,10 @@ export const CommentToolbarButton = () => {
         className="bn-button"
         onClick={() => {
           editor.comments?.startPendingComment();
+          editor.formattingToolbar.closeMenu();
         }}
         aria-haspopup="dialog"
+        data-test="comment-toolbar-button"
       >
         <Box
           $direction="row"