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 e0ea8f59..11796c65 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 @@ -976,7 +976,10 @@ test.describe('Doc Editor', () => { await expect(pdfBlock).toBeVisible(); // Try with invalid PDF first - await page.getByText(/Add (PDF|file)/).click(); + await page + .getByText(/Add (PDF|file)/) + .first() + .click(); await page.locator('[data-test="embed-tab"]').click(); @@ -994,7 +997,6 @@ test.describe('Doc Editor', () => { // Now with a valid PDF await page.getByText(/Add (PDF|file)/).click(); const fileChooserPromise = page.waitForEvent('filechooser'); - const downloadPromise = page.waitForEvent('download'); await page.getByText(/Upload (PDF|file)/).click(); const fileChooser = await fileChooserPromise; @@ -1003,24 +1005,16 @@ test.describe('Doc Editor', () => { // Wait for the media-check to be processed await page.waitForTimeout(1000); - const pdfEmbed = page - .locator('.--docs--editor-container embed.bn-visual-media') + const pdfIframe = page + .locator('.--docs--editor-container iframe.bn-visual-media') .first(); // Check src of pdf - expect(await pdfEmbed.getAttribute('src')).toMatch( + expect(await pdfIframe.getAttribute('src')).toMatch( /http:\/\/localhost:8083\/media\/.*\/attachments\/.*.pdf/, ); - await expect(pdfEmbed).toHaveAttribute('type', 'application/pdf'); - await expect(pdfEmbed).toHaveAttribute('role', 'presentation'); - - // Check download with original filename - await pdfBlock.click(); - await page.locator('[data-test="downloadfile"]').click(); - - const download = await downloadPromise; - expect(download.suggestedFilename()).toBe('test-pdf.pdf'); + await expect(pdfIframe).toHaveAttribute('role', 'presentation'); }); test('it preserves text when switching between mobile and desktop views', async ({ diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx index 1130d2b5..bac459c9 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx @@ -15,14 +15,18 @@ import { import { TFunction } from 'i18next'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { createGlobalStyle, css } from 'styled-components'; +import { createGlobalStyle } from 'styled-components'; import { Box, Icon, Loading } from '@/components'; +import Warning from '../../assets/warning.svg'; import { ANALYZE_URL } from '../../conf'; import { DocsBlockNoteEditor } from '../../types'; const PDFBlockStyle = createGlobalStyle` + .bn-block-content[data-content-type="pdf"] .bn-file-block-content-wrapper { + width: fit-content; + } .bn-block-content[data-content-type="pdf"] .bn-file-block-content-wrapper[style*="fit-content"] { width: 100% !important; } @@ -59,11 +63,7 @@ interface PdfBlockComponentProps { >; } -const PdfBlockComponent = ({ - editor, - block, - contentRef, -}: PdfBlockComponentProps) => { +const PdfBlockComponent = ({ editor, block }: PdfBlockComponentProps) => { const pdfUrl = block.props.url; const { i18n, t } = useTranslation(); const lang = i18n.resolvedLanguage; @@ -114,27 +114,29 @@ const PdfBlockComponent = ({ void validatePDFContent(); }, [pdfUrl]); + const isInvalidPDF = + !isPDFContentLoading && isPDFContent !== null && !isPDFContent; + + if (isInvalidPDF) { + return ( + + + {t('Invalid or missing PDF file.')} + + ); + } + return ( - + <> {isPDFContentLoading && } - {!isPDFContentLoading && isPDFContent !== null && !isPDFContent && ( - editor.setTextCursorPosition(block)} - > - {t('Invalid or missing PDF file.')} - - )} @@ -144,21 +146,19 @@ const PdfBlockComponent = ({ > {!isPDFContentLoading && isPDFContent && ( editor.setTextCursorPosition(block)} /> )} - + ); };