🦺(frontend) check content type pdf on PdfBlock

Pdfblock was quite permissive on the content type
it was accepting. Now it checks that the content
type is exactly 'application/pdf' before rendering
the PDF viewer.

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx

@@ -13,11 +13,11 @@ import {
   createReactBlockSpec,
 } from '@blocknote/react';
 import { TFunction } from 'i18next';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { createGlobalStyle } from 'styled-components';
+import { createGlobalStyle, css } from 'styled-components';
 
-import { Box, Icon } from '@/components';
+import { Box, Icon, Loading } from '@/components';
 
 import { DocsBlockNoteEditor } from '../../types';
 
@@ -66,6 +66,7 @@ const PdfBlockComponent = ({
   const pdfUrl = block.props.url;
   const { i18n, t } = useTranslation();
   const lang = i18n.resolvedLanguage;
+  const [isPDFContent, setIsPDFContent] = useState<boolean | null>(null);
 
   useEffect(() => {
     if (lang && locales[lang as keyof typeof locales]) {
@@ -82,29 +83,74 @@ const PdfBlockComponent = ({
     }
   }, [lang, t]);
 
+  useEffect(() => {
+    if (!pdfUrl) {
+      setIsPDFContent(false);
+      return;
+    }
+
+    const validatePDFContent = async () => {
+      try {
+        const response = await fetch(pdfUrl);
+        const contentType = response.headers.get('content-type');
+
+        if (response.ok && contentType?.includes('application/pdf')) {
+          setIsPDFContent(true);
+        } else {
+          setIsPDFContent(false);
+        }
+      } catch {
+        setIsPDFContent(false);
+      }
+    };
+
+    void validatePDFContent();
+  }, [pdfUrl]);
+
   return (
     <Box ref={contentRef} className="bn-file-block-content-wrapper">
       <PDFBlockStyle />
-      <ResizableFileBlockWrapper
-        buttonIcon={
-          <Icon iconName="upload" $size="24px" $css="line-height: normal;" />
-        }
-        block={block as unknown as FileBlockBlock}
-        editor={editor as unknown as FileBlockEditor}
-      >
+      {isPDFContent === null && <Loading />}
+      {isPDFContent !== null && !isPDFContent && (
         <Box
-          className="bn-visual-media"
-          role="presentation"
-          as="embed"
-          $width="100%"
-          $height="450px"
-          type="application/pdf"
-          src={pdfUrl}
+          $align="center"
+          $justify="center"
+          $color="#666"
+          $background="#f5f5f5"
+          $border="1px solid #ddd"
+          $height="300px"
+          $css={css`
+            text-align: center;
+          `}
           contentEditable={false}
-          draggable={false}
           onClick={() => editor.setTextCursorPosition(block)}
-        />
-      </ResizableFileBlockWrapper>
+        >
+          {t('Invalid or missing PDF file.')}
+        </Box>
+      )}
+      {isPDFContent && (
+        <ResizableFileBlockWrapper
+          buttonIcon={
+            <Icon iconName="upload" $size="24px" $css="line-height: normal;" />
+          }
+          block={block as unknown as FileBlockBlock}
+          editor={editor as unknown as FileBlockEditor}
+        >
+          <Box
+            as="embed"
+            className="bn-visual-media"
+            role="presentation"
+            $width="100%"
+            $height="450px"
+            type="application/pdf"
+            src={pdfUrl}
+            aria-label={block.props.name || t('PDF document')}
+            contentEditable={false}
+            draggable={false}
+            onClick={() => editor.setTextCursorPosition(block)}
+          />
+        </ResizableFileBlockWrapper>
+      )}
     </Box>
   );
 };