🐛(frontend) link not clickable and flickering firefox

CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+## Fixed
+
+🐛(frontend) link not clickable and flickering firefox #457
+
 
 ## [1.8.0] - 2024-11-25
 

src/frontend/apps/impress/package.json

@@ -66,6 +66,6 @@
     "stylelint-prettier": "5.0.2",
     "typescript": "*",
     "webpack": "5.96.1",
-    "workbox-webpack-plugin": "7.3.0"
+    "workbox-webpack-plugin": "7.1.0"
   }
 }

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

@@ -4,16 +4,14 @@ import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
-import { t } from 'i18next';
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, TextErrors } from '@/components';
 import { useAuthStore } from '@/core/auth';
-import { useMediaUrl } from '@/core/config';
 import { Doc } from '@/features/docs/doc-management';
 
-import { useCreateDocAttachment } from '../api/useCreateDocUpload';
+import { useUploadFile } from '../hook';
 import useSaveDoc from '../hook/useSaveDoc';
 import { useEditorStore, useHeadingStore } from '../stores';
 import { randomColor } from '../utils';
@@ -26,17 +24,8 @@ const cssEditor = (readonly: boolean) => `
   };
   & .bn-editor {
     padding-right: 30px;
-    ${
-      readonly &&
-      `
-        padding-left: 30px;
-        pointer-events: none;
-      `
-    }
+    ${readonly && `padding-left: 30px;`}
   };
-  & .collaboration-cursor__caret.ProseMirror-widget{
-    word-wrap: initial;
-  }
   & .bn-inline-content code {
     background-color: gainsboro;
     padding: 2px;
@@ -87,48 +76,59 @@ export const BlockNoteEditor = ({
   const isVersion = doc.id !== storeId;
   const { userData } = useAuthStore();
   const { setEditor } = useEditorStore();
-  const mediaUrl = useMediaUrl();
-
+  const { t } = useTranslation();
   const readOnly = !doc.abilities.partial_update || isVersion;
   useSaveDoc(doc.id, provider.document, !readOnly);
-  const {
-    mutateAsync: createDocAttachment,
-    isError: isErrorAttachment,
-    error: errorAttachment,
-  } = useCreateDocAttachment();
   const { setHeadings, resetHeadings } = useHeadingStore();
   const { i18n } = useTranslation();
   const lang = i18n.language;
 
-  const uploadFile = useCallback(
-    async (file: File) => {
-      const body = new FormData();
-      body.append('file', file);
+  const { uploadFile, errorAttachment } = useUploadFile(doc.id);
 
-      const ret = await createDocAttachment({
-        docId: doc.id,
-        body,
-      });
-
-      return `${mediaUrl}${ret.file}`;
-    },
-    [createDocAttachment, doc.id, mediaUrl],
-  );
+  const collabName =
+    userData?.full_name ||
+    userData?.email ||
+    (readOnly ? 'Reader' : t('Anonymous'));
 
   const editor = useCreateBlockNote(
     {
       collaboration: {
         provider,
         fragment: provider.document.getXmlFragment('document-store'),
         user: {
-          name: userData?.full_name || userData?.email || t('Anonymous'),
+          name: collabName,
           color: randomColor(),
         },
+        /**
+         * We re-use the blocknote code to render the cursor but we:
+         * - fix rendering issue with Firefox
+         * - We don't want to show the cursor when anonymous users
+         */
+        renderCursor: (user: { color: string; name: string }) => {
+          const cursor = document.createElement('span');
+
+          if (user.name === 'Reader') {
+            return cursor;
+          }
+
+          cursor.classList.add('collaboration-cursor__caret');
+          cursor.setAttribute('style', `border-color: ${user.color}`);
+
+          const label = document.createElement('span');
+
+          label.classList.add('collaboration-cursor__label');
+          label.setAttribute('style', `background-color: ${user.color}`);
+          label.insertBefore(document.createTextNode(user.name), null);
+
+          cursor.insertBefore(label, null);
+
+          return cursor;
+        },
       },
       dictionary: locales[lang as keyof typeof locales] as Dictionary,
       uploadFile,
     },
-    [lang, provider, uploadFile, userData?.email, userData?.full_name],
+    [collabName, lang, provider, uploadFile],
   );
 
   useEffect(() => {
@@ -153,7 +153,7 @@ export const BlockNoteEditor = ({
 
   return (
     <Box $css={cssEditor(readOnly)}>
-      {isErrorAttachment && (
+      {errorAttachment && (
         <Box $margin={{ bottom: 'big' }}>
           <TextErrors
             causes={errorAttachment.cause}

src/frontend/apps/impress/src/features/docs/doc-editor/hook/index.ts

@@ -0,0 +1,2 @@
+export * from './useSaveDoc';
+export * from './useUploadFile';

src/frontend/apps/impress/src/features/docs/doc-editor/hook/useUploadFile.tsx

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+
+import { useMediaUrl } from '@/core/config';
+
+import { useCreateDocAttachment } from '../api';
+
+export const useUploadFile = (docId: string) => {
+  const mediaUrl = useMediaUrl();
+  const {
+    mutateAsync: createDocAttachment,
+    isError: isErrorAttachment,
+    error: errorAttachment,
+  } = useCreateDocAttachment();
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      const body = new FormData();
+      body.append('file', file);
+
+      const ret = await createDocAttachment({
+        docId,
+        body,
+      });
+
+      return `${mediaUrl}${ret.file}`;
+    },
+    [createDocAttachment, docId, mediaUrl],
+  );
+
+  return {
+    uploadFile,
+    isErrorAttachment,
+    errorAttachment,
+  };
+};

src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx

@@ -10,8 +10,8 @@ import {
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import { t } from 'i18next';
 import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Box, Text } from '@/components';
 import { useEditorStore } from '@/features/docs/doc-editor';
@@ -27,6 +27,7 @@ interface ModalPDFProps {
 }
 
 export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
+  const { t } = useTranslation();
   const { data: templates } = useTemplates({
     ordering: TemplatesOrdering.BY_CREATED_ON_DESC,
   });

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx

@@ -6,8 +6,8 @@ import {
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import { t } from 'i18next';
 import { useRouter } from 'next/router';
+import { useTranslation } from 'react-i18next';
 
 import { Box, Text, TextErrors } from '@/components';
 import { useCunninghamTheme } from '@/cunningham/';
@@ -22,6 +22,7 @@ interface ModalRemoveDocProps {
 }
 
 export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
+  const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
   const { toast } = useToastProvider();
   const { push } = useRouter();

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx

@@ -3,7 +3,7 @@ import {
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 import { createGlobalStyle } from 'styled-components';
 
 import { Box, Card, IconBG, SideModal, Text } from '@/components';
@@ -44,6 +44,7 @@ interface ModalShareProps {
 }
 
 export const ModalShare = ({ onClose, doc }: ModalShareProps) => {
+  const { t } = useTranslation();
   const { isMobile, isSmallMobile } = useResponsiveStore();
   const width = isSmallMobile ? '100vw' : isMobile ? '90vw' : '70vw';
   const { toast } = useToastProvider();

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx

@@ -6,8 +6,8 @@ import {
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import { t } from 'i18next';
 import { useRouter } from 'next/router';
+import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
 
 import { Box, Text } from '@/components';
@@ -30,6 +30,7 @@ export const ModalVersion = ({
   docId,
   versionId,
 }: ModalVersionProps) => {
+  const { t } = useTranslation();
   const { toast } = useToastProvider();
   const { push } = useRouter();
   const { providers } = useDocStore();

src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionItem.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@openfun/cunningham-react';
-import { t } from 'i18next';
 import React, { PropsWithChildren, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Box, DropButton, IconOptions, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
@@ -25,6 +25,7 @@ export const VersionItem = ({
   link,
   isActive,
 }: VersionItemProps) => {
+  const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
   const [isDropOpen, setIsDropOpen] = useState(false);
   const [isModalVersionOpen, setIsModalVersionOpen] = useState(false);