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 3c1a9527..54ec994f 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 @@ -11,11 +11,11 @@ import { useTranslation } from 'react-i18next'; import { Box, TextErrors } from '@/components'; import { mediaUrl } from '@/core'; import { useAuthStore } from '@/core/auth'; -import { Doc, useDocStore } from '@/features/docs/doc-management'; +import { Doc } from '@/features/docs/doc-management'; import { useCreateDocAttachment } from '../api/useCreateDocUpload'; import useSaveDoc from '../hook/useSaveDoc'; -import { useHeadingStore } from '../stores'; +import { useEditorStore, useHeadingStore } from '../stores'; import { randomColor } from '../utils'; import { BlockNoteToolbar } from './BlockNoteToolbar'; @@ -86,11 +86,10 @@ export const BlockNoteEditor = ({ }: BlockNoteEditorProps) => { const isVersion = doc.id !== storeId; const { userData } = useAuthStore(); - const { setStore, docsStore } = useDocStore(); + const { setEditor } = useEditorStore(); const readOnly = !doc.abilities.partial_update || isVersion; useSaveDoc(doc.id, provider.document, !readOnly); - const storedEditor = docsStore?.[storeId]?.editor; const { mutateAsync: createDocAttachment, isError: isErrorAttachment, @@ -132,8 +131,12 @@ export const BlockNoteEditor = ({ ); useEffect(() => { - setStore(storeId, { editor }); - }, [setStore, storeId, editor]); + setEditor(editor); + + return () => { + setEditor(undefined); + }; + }, [setEditor, editor]); useEffect(() => { setHeadings(editor); @@ -160,7 +163,7 @@ export const BlockNoteEditor = ({ )} )} - {isPanelTableContentOpen && ( - - )} + {isPanelTableContentOpen && } {!isPanelTableContentOpen && doc.abilities.versions_list && ( )} diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts index 71a6b765..499405d4 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts @@ -1,2 +1,3 @@ +export * from './useEditorStore'; export * from './useHeadingStore'; export * from './usePanelEditorStore'; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx new file mode 100644 index 00000000..025f2ad8 --- /dev/null +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx @@ -0,0 +1,14 @@ +import { BlockNoteEditor } from '@blocknote/core'; +import { create } from 'zustand'; + +export interface UseEditorstore { + editor?: BlockNoteEditor; + setEditor: (editor: BlockNoteEditor | undefined) => void; +} + +export const useEditorStore = create((set) => ({ + editor: undefined, + setEditor: (editor) => { + set({ editor }); + }, +})); diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx index 6095a102..47bf9b78 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx @@ -8,17 +8,18 @@ import { useTranslation } from 'react-i18next'; import { Box, DropButton, IconOptions } from '@/components'; import { useAuthStore } from '@/core'; -import { usePanelEditorStore } from '@/features/docs/doc-editor/'; +import { + useEditorStore, + usePanelEditorStore, +} from '@/features/docs/doc-editor/'; import { Doc, ModalRemoveDoc, ModalShare, - useDocStore, } from '@/features/docs/doc-management'; +import { ModalVersion, Versions } from '@/features/docs/doc-versioning'; import { useResponsiveStore } from '@/stores'; -import { ModalVersion, Versions } from '../../doc-versioning'; - import { ModalPDF } from './ModalExport'; interface DocToolBoxProps { @@ -36,13 +37,12 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => { const [isModalVersionOpen, setIsModalVersionOpen] = useState(false); const { isSmallMobile } = useResponsiveStore(); const { authenticated } = useAuthStore(); - const { docsStore } = useDocStore(); + const { editor } = useEditorStore(); const { toast } = useToastProvider(); const copyCurrentEditorToClipboard = async ( asFormat: 'html' | 'markdown', ) => { - const editor = docsStore[doc.id]?.editor; if (!editor) { toast(t('Editor unavailable'), VariantType.ERROR, { duration: 3000 }); return; diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx index c22dc151..b4507f8e 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx @@ -14,7 +14,8 @@ import { t } from 'i18next'; import { useEffect, useMemo, useState } from 'react'; import { Box, Text } from '@/components'; -import { Doc, useDocStore } from '@/features/docs/doc-management'; +import { useEditorStore } from '@/features/docs/doc-editor'; +import { Doc } from '@/features/docs/doc-management'; import { useExport } from '../api/useExport'; import { TemplatesOrdering, useTemplates } from '../api/useTemplates'; @@ -30,7 +31,7 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => { ordering: TemplatesOrdering.BY_CREATED_ON_DESC, }); const { toast } = useToastProvider(); - const { docsStore } = useDocStore(); + const { editor } = useEditorStore(); const { mutate: createExport, data: documentGenerated, @@ -103,8 +104,6 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => { return; } - const editor = docsStore[doc.id].editor; - if (!editor) { toast(t('No editor found'), VariantType.ERROR); return; diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx index 8d38fb56..2461d0aa 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx @@ -1,4 +1,3 @@ -import { BlockNoteEditor } from '@blocknote/core'; import { HocuspocusProvider } from '@hocuspocus/provider'; import * as Y from 'yjs'; import { create } from 'zustand'; @@ -8,7 +7,6 @@ import { Base64, Doc, blocksToYDoc } from '@/features/docs/doc-management'; interface DocStore { provider: HocuspocusProvider; - editor?: BlockNoteEditor; } export interface UseDocStore { diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx index f9740030..f765eb79 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx @@ -2,22 +2,19 @@ import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Box, BoxButton, Text } from '@/components'; -import { HeadingBlock } from '@/features/docs/doc-editor'; -import { Doc, useDocStore } from '@/features/docs/doc-management'; +import { HeadingBlock, useEditorStore } from '@/features/docs/doc-editor'; import { useResponsiveStore } from '@/stores'; import { Heading } from './Heading'; interface TableContentProps { - doc: Doc; headings: HeadingBlock[]; } -export const TableContent = ({ doc, headings }: TableContentProps) => { - const { docsStore } = useDocStore(); +export const TableContent = ({ headings }: TableContentProps) => { + const { editor } = useEditorStore(); const { isMobile } = useResponsiveStore(); const { t } = useTranslation(); - const editor = docsStore?.[doc.id]?.editor; const [headingIdHighlight, setHeadingIdHighlight] = useState(); // To highlight the first heading in the viewport diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx index bc7a0d9b..5ca10764 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx @@ -32,7 +32,7 @@ export const ModalVersion = ({ }: ModalVersionProps) => { const { toast } = useToastProvider(); const router = useRouter(); - const { docsStore, setStore } = useDocStore(); + const { docsStore } = useDocStore(); const { mutate: updateDoc } = useUpdateDoc({ listInvalideQueries: [KEY_LIST_DOC_VERSIONS], onSuccess: () => { @@ -46,10 +46,6 @@ export const ModalVersion = ({ return; } - setStore(docId, { - editor: undefined, - }); - revertUpdate( docsStore[docId].provider.document, docsStore[docId].provider.document,