diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx index 9423cbb1..e2ee1543 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx @@ -12,7 +12,7 @@ import { BlockNoteView } from '@blocknote/mantine'; import '@blocknote/mantine/style.css'; import { useCreateBlockNote } from '@blocknote/react'; import { HocuspocusProvider } from '@hocuspocus/provider'; -import { useEffect } from 'react'; +import { useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import * as Y from 'yjs'; @@ -79,6 +79,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { const { setEditor } = useEditorStore(); const { t } = useTranslation(); const { isSynced: isConnectedToCollabServer } = useProviderStore(); + const refEditorContainer = useRef(null); useSaveDoc(doc.id, provider.document, isConnectedToCollabServer); const { i18n } = useTranslation(); @@ -154,7 +155,9 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { ); useHeadings(editor); - useShortcuts(editor); + + useShortcuts(editor, refEditorContainer.current); + useUploadStatus(editor); useEffect(() => { @@ -166,7 +169,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { }, [setEditor, editor]); return ( - <> + {errorAttachment && ( { - + ); }; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useHeadings.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useHeadings.tsx index 2fbad06c..6d89a8aa 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useHeadings.tsx +++ b/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]); }; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useShortcuts.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useShortcuts.tsx index f2f3722f..6a03bddc 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useShortcuts.tsx +++ b/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, + el: HTMLDivElement | null, +) => { useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === '@' && editor?.isFocused()) { @@ -29,11 +32,14 @@ export const useShortcuts = (editor: DocsBlockNoteEditor) => { } }; - // Attach the event listener to the document instead of the window - document.addEventListener('keydown', handleKeyDown); + if (!el) { + return; + } + + el.addEventListener('keydown', handleKeyDown); return () => { - document.removeEventListener('keydown', handleKeyDown); + el.removeEventListener('keydown', handleKeyDown); }; - }, [editor]); + }, [editor, el]); }; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useUploadFile.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useUploadFile.tsx index 461b6fd7..6cab7272 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useUploadFile.tsx +++ b/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]); };