⚡️(frontend) improve unsubscribe logic when unmounting components

We can now unsubscribe on the editor events,
improving performance and preventing memory leaks.

Author: AntoLC

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

@@ -169,7 +169,10 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   );
 
   useHeadings(editor);
-  useShortcuts(editor);
+
+  const className = '--docs--editor-container';
+  useShortcuts(editor, className);
+
   useUploadStatus(editor);
 
   useEffect(() => {
@@ -185,7 +188,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       $padding={{ top: 'md' }}
       $background="white"
       $css={cssEditor(readOnly, isDeletedDoc)}
-      className="--docs--editor-container"
+      className={className}
     >
       {errorAttachment && (
         <Box $margin={{ bottom: 'big', top: 'none', horizontal: 'large' }}>

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

@@ -9,12 +9,13 @@ export const useHeadings = (editor: DocsBlockNoteEditor) => {
   useEffect(() => {
     setHeadings(editor);
 
-    editor?.onChange(() => {
+    const unsubscribe = editor?.onChange(() => {
       setHeadings(editor);
     });
 
     return () => {
       resetHeadings();
+      unsubscribe();
     };
   }, [editor, resetHeadings, setHeadings]);
 };

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

@@ -2,7 +2,10 @@ import { useEffect } from 'react';
 
 import { DocsBlockNoteEditor } from '../types';
 
-export const useShortcuts = (editor: DocsBlockNoteEditor) => {
+export const useShortcuts = (
+  editor: DocsBlockNoteEditor,
+  elClassname: string,
+) => {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === '@' && editor?.isFocused()) {
@@ -30,10 +33,14 @@ export const useShortcuts = (editor: DocsBlockNoteEditor) => {
     };
 
     // Attach the event listener to the document instead of the window
-    document.addEventListener('keydown', handleKeyDown);
+    const el = document.querySelector<HTMLElement>(`.${elClassname}`);
+    if (!el) {
+      return;
+    }
+    el.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      el.removeEventListener('keydown', handleKeyDown);
     };
-  }, [editor]);
+  }, [editor, elClassname]);
 };

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

@@ -40,7 +40,7 @@ export const useUploadStatus = (editor: DocsBlockNoteEditor) => {
   const { t } = useTranslation();
 
   useEffect(() => {
-    editor.onChange((_, context) => {
+    const unsubscribe = editor.onChange((_, context) => {
       const blocksChanges = context.getChanges();
 
       if (!blocksChanges.length) {
@@ -90,7 +90,12 @@ export const useUploadStatus = (editor: DocsBlockNoteEditor) => {
 
       return () => {
         clearTimeout(timeoutId);
+        unsubscribe();
       };
     });
+
+    return () => {
+      unsubscribe();
+    };
   }, [editor, t]);
 };