diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts index 15a86db5..9ff17d65 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts +++ b/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(); }); /** diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx index 26067c18..1aaaa5e3 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx +++ b/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" >