🐛(frontend) link not clickable and flickering firefox

The link in the read mode was not clickable anymore,
it was due to a attempt to not display the cursor
of anonymous users.
We changes the way to do it by rendering our own cursor,
when a user is anonymous we don't render the cursor.
By rendering our own cursor we fixed another problem,
the cursor was flickering when the user was typing
at the end of the line on the firefox browser.

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/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -24,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;
@@ -94,20 +85,50 @@ export const BlockNoteEditor = ({
 
   const { uploadFile, errorAttachment } = useUploadFile(doc.id);
 
+  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(() => {