🚸(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.
This commit is contained in:
Anthony LC
2025-11-26 09:50:58 +01:00
parent 7dae3a3c02
commit 2864669dde
2 changed files with 72 additions and 6 deletions

View File

@@ -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();
});
/**

View File

@@ -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"