🐛(frontend) Fix frontend issues

src/frontend/apps/impress/package.json

@@ -19,14 +19,14 @@
   },
   "dependencies": {
     "@ag-media/react-pdf-table": "2.0.3",
-    "@blocknote/code-block": "0.44.2",
-    "@blocknote/core": "0.44.2",
-    "@blocknote/mantine": "0.44.2",
-    "@blocknote/react": "0.44.2",
-    "@blocknote/xl-docx-exporter": "0.44.2",
-    "@blocknote/xl-multi-column": "0.44.2",
-    "@blocknote/xl-odt-exporter": "0.44.2",
-    "@blocknote/xl-pdf-exporter": "0.44.2",
+    "@blocknote/code-block": "0.45.0",
+    "@blocknote/core": "0.45.0",
+    "@blocknote/mantine": "0.45.0",
+    "@blocknote/react": "0.45.0",
+    "@blocknote/xl-docx-exporter": "0.45.0",
+    "@blocknote/xl-multi-column": "0.45.0",
+    "@blocknote/xl-odt-exporter": "0.45.0",
+    "@blocknote/xl-pdf-exporter": "0.45.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/modifiers": "9.0.0",
     "@emoji-mart/data": "1.2.1",
@@ -36,7 +36,7 @@
     "@fontsource/material-icons": "5.2.7",
     "@gouvfr-lasuite/integration": "1.0.3",
     "@gouvfr-lasuite/ui-kit": "0.18.0",
-    "@hocuspocus/provider": "3.4.0",
+    "@hocuspocus/provider": "3.4.3",
     "@mantine/core": "8.3.9",
     "@mantine/hooks": "8.3.9",
     "@openfun/cunningham-react": "4.0.0",

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

@@ -16,6 +16,7 @@ import { HocuspocusProvider } from '@hocuspocus/provider';
 import { useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
+import type { Awareness } from 'y-protocols/awareness';
 import * as Y from 'yjs';
 
 import { Box, TextErrors } from '@/components';
@@ -117,7 +118,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const editor: DocsBlockNoteEditor = useCreateBlockNote(
     {
       collaboration: {
-        provider: provider,
+        provider: provider as { awareness?: Awareness | undefined },
         fragment: provider.document.getXmlFragment('document-store'),
         user: {
           name: cursorName,
@@ -163,8 +164,10 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       },
       dictionary: {
         ...locales[lang as keyof typeof locales],
-        multi_column:
-          multiColumnLocales?.[lang as keyof typeof multiColumnLocales],
+        ...(multiColumnLocales && {
+          multi_column:
+            multiColumnLocales[lang as keyof typeof multiColumnLocales],
+        }),
       },
       pasteHandler: ({ event, defaultPasteHandler }) => {
         // Get clipboard data

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

@@ -37,7 +37,8 @@ export class DocsThreadStore extends ThreadStore {
     if (docAuth.canSee) {
       this.awareness = awareness;
       this.awareness?.on('update', this.onAwarenessUpdate);
-      void this.refreshThreads();
+
+      this.refreshThreads();
     }
   }
 
@@ -98,9 +99,9 @@ export class DocsThreadStore extends ThreadStore {
 
       // If we know the threadId, schedule a targeted refresh. Otherwise, fall back to full refresh.
       if (ping.threadId) {
-        await this.refreshThread(ping.threadId);
+        void this.refreshThread(ping.threadId);
       } else {
-        await this.refreshThreads();
+        this.refreshThreads();
       }
     }
   };
@@ -280,7 +281,7 @@ export class DocsThreadStore extends ThreadStore {
         }),
       );
 
-      await this.refreshThreads();
+      this.refreshThreads();
       return;
     }
 
@@ -298,7 +299,17 @@ export class DocsThreadStore extends ThreadStore {
     this.notifySubscribers();
   }
 
-  public async refreshThreads(): Promise<void> {
+  public refreshThreads() {
+    this.initThreads().catch((e) => {
+      if (!(e instanceof APIError) || e.status !== 401) {
+        throw e;
+      }
+
+      return;
+    });
+  }
+
+  public async initThreads(): Promise<void> {
     const response = await fetchAPI(`documents/${this.docId}/threads/`, {
       method: 'GET',
     });
@@ -484,7 +495,7 @@ export class DocsThreadStore extends ThreadStore {
       );
     }
 
-    await this.refreshThreads();
+    this.refreshThreads();
     this.ping(threadId);
   };
 

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>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx

@@ -79,10 +79,11 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
 
   return (
     <BoxButton
+      as="span"
       onClick={handleClick}
       draggable="false"
       $css={css`
-        display: contents;
+        display: inline;
         padding: 0.1rem 0.4rem;
         border-radius: 4px;
         & svg {
@@ -91,7 +92,9 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
           margin-right: 0.2rem;
         }
         &:hover {
-          background-color: ${colorsTokens['gray-100']};
+          background-color: var(
+            --c--contextuals--background--semantic--contextual--primary
+          );
         }
         transition: background-color var(--c--globals--transitions--duration)
           var(--c--globals--transitions--ease-out);

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx

@@ -171,6 +171,7 @@ export const SearchPage = ({
         {trigger}
         <Box
           as="input"
+          name="doc-search-input"
           $padding={{ left: '3px' }}
           $css={inputStyle}
           ref={inputRef}

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx

@@ -172,7 +172,10 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
           emoji={emoji}
           withEmojiPicker={doc.abilities.partial_update}
           defaultIcon={
-            <SubPageIcon color="var(--c--contextuals--content--semantic--info--tertiary)" />
+            <SubPageIcon
+              color="var(--c--contextuals--content--semantic--info--tertiary)"
+              style={{ flexShrink: 0 }}
+            />
           }
           $size="sm"
           docId={doc.id}

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx

@@ -63,13 +63,11 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
     });
     treeContext?.treeData.handleMove(result);
   };
+
   /**
    * This function resets the tree states.
    */
   const resetStateTree = useCallback(() => {
-    if (!treeContext?.root?.id) {
-      return;
-    }
     treeContext?.setRoot(null);
     setInitialOpenState(undefined);
   }, [treeContext]);

src/frontend/apps/impress/src/pages/globals.css

@@ -10,6 +10,12 @@ body {
   padding: 0;
 }
 
+/* stylelint-disable-next-line selector-id-pattern */
+body > #__next > .c__app > div:has(> .c__loader) {
+  min-height: 100vh;
+  width: 100vw;
+}
+
 * {
   box-sizing: border-box;
 }

src/frontend/apps/impress/src/services/PosthogAnalytic.tsx

@@ -3,6 +3,7 @@ import posthog from 'posthog-js';
 import { PostHogProvider as PHProvider } from 'posthog-js/react';
 import { JSX, PropsWithChildren, ReactNode, useEffect } from 'react';
 
+import { useIsOffline } from '@/features/service-worker/hooks/useOffline';
 import { AbstractAnalytic, AnalyticEvent } from '@/libs/';
 
 export class PostHogAnalytic extends AbstractAnalytic {
@@ -45,6 +46,8 @@ export function PostHogProvider({
   children,
   conf,
 }: PropsWithChildren<PostHogProviderProps>) {
+  const isOffline = useIsOffline((state) => state.isOffline);
+
   useEffect(() => {
     if (!conf?.id || !conf?.host || posthog.__loaded) {
       return;
@@ -53,9 +56,9 @@ export function PostHogProvider({
     posthog.init(conf.id, {
       api_host: conf.host,
       person_profiles: 'always',
-      loaded: (posthog) => {
+      loaded: (posthogInstance) => {
         if (process.env.NODE_ENV === 'development') {
-          posthog.debug();
+          posthogInstance.debug();
         }
       },
       capture_pageview: false,
@@ -71,5 +74,14 @@ export function PostHogProvider({
     };
   }, [conf?.host, conf?.id]);
 
+  // Disable PostHog when offline to prevent retry requests
+  useEffect(() => {
+    if (isOffline) {
+      posthog.opt_out_capturing();
+    } else {
+      posthog.opt_in_capturing();
+    }
+  }, [isOffline]);
+
   return <PHProvider client={posthog}>{children}</PHProvider>;
 }

src/frontend/package.json

@@ -37,6 +37,7 @@
     "@types/react-dom": "19.2.3",
     "docx": "9.5.0",
     "eslint": "9.39.1",
+    "prosemirror-view": "1.41.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "typescript": "5.9.3",

src/frontend/servers/y-provider/package.json

@@ -16,8 +16,8 @@
     "node": ">=22"
   },
   "dependencies": {
-    "@blocknote/server-util": "0.44.2",
-    "@hocuspocus/server": "3.4.0",
+    "@blocknote/server-util": "0.45.0",
+    "@hocuspocus/server": "3.4.3",
     "@sentry/node": "10.26.0",
     "@sentry/profiling-node": "10.26.0",
     "@tiptap/extensions": "*",
@@ -30,8 +30,8 @@
     "yjs": "*"
   },
   "devDependencies": {
-    "@blocknote/core": "0.44.2",
-    "@hocuspocus/provider": "3.4.0",
+    "@blocknote/core": "0.45.0",
+    "@hocuspocus/provider": "3.4.3",
     "@types/cors": "2.8.19",
     "@types/express": "5.0.5",
     "@types/express-ws": "3.0.6",