diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx index b8e36c66d..af778f6f5 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx @@ -1,8 +1,10 @@ import { CommentsExtension } from '@blocknote/core/comments'; import { BlockNoteView } from '@blocknote/mantine'; import { ThreadsSidebar, useCreateBlockNote } from '@blocknote/react'; +import { HocuspocusProvider } from '@hocuspocus/provider'; import { useTranslation } from 'react-i18next'; import { css } from 'styled-components'; +import { Awareness } from 'y-protocols/awareness.js'; import { Box, ButtonCloseModal, Text } from '@/components/'; import { Doc } from '@/docs/doc-management'; @@ -13,9 +15,14 @@ import { useComments } from './useComments'; interface CommentSideBarProps { doc: Doc; onClose: () => void; + provider: HocuspocusProvider; } -export const CommentSideBar = ({ doc, onClose }: CommentSideBarProps) => { +export const CommentSideBar = ({ + doc, + onClose, + provider, +}: CommentSideBarProps) => { const { user } = useAuth(); const canSeeComment = doc.abilities.comment; const { t } = useTranslation(); @@ -28,9 +35,17 @@ export const CommentSideBar = ({ doc, onClose }: CommentSideBarProps) => { const editor = useCreateBlockNote( { + collaboration: { + fragment: provider.document.getXmlFragment('document-store'), + user: { + name: '', + color: '', + }, + provider: provider as { awareness?: Awareness | undefined }, + }, extensions: [CommentsExtension({ threadStore, resolveUsers })], }, - [threadStore, resolveUsers], + [threadStore, resolveUsers, provider], ); return ( @@ -52,14 +67,14 @@ export const CommentSideBar = ({ doc, onClose }: CommentSideBarProps) => { diff --git a/src/frontend/apps/impress/src/features/right-panel/components/RightPanel.tsx b/src/frontend/apps/impress/src/features/right-panel/components/RightPanel.tsx index 245454832..0e68246d2 100644 --- a/src/frontend/apps/impress/src/features/right-panel/components/RightPanel.tsx +++ b/src/frontend/apps/impress/src/features/right-panel/components/RightPanel.tsx @@ -3,7 +3,7 @@ import { css } from 'styled-components'; import { Box } from '@/components'; import { CommentSideBar } from '@/features/docs/doc-editor/components/comments/CommentSideBar'; -import { useDocStore } from '@/features/docs/doc-management'; +import { useDocStore, useProviderStore } from '@/features/docs/doc-management'; import { HEADER_HEIGHT } from '@/features/header'; import { useRightPanelStore } from './useRightPanelStore'; @@ -12,8 +12,11 @@ export const RightPanel = () => { const { t } = useTranslation(); const { currentDoc: doc } = useDocStore(); const { setIsPanelOpen, isPanelOpen } = useRightPanelStore(); + const { provider, isReady } = useProviderStore(); + const isProviderReady = + isReady && provider && provider?.configuration.name === doc?.id; - if (!doc) { + if (!doc || !isProviderReady) { return null; } @@ -43,7 +46,11 @@ export const RightPanel = () => { `} `} > - setIsPanelOpen(false)} /> + setIsPanelOpen(false)} + provider={provider} + /> ); }; diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx index ee17b9a42..b521cff86 100644 --- a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx +++ b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx @@ -71,6 +71,9 @@ export function DocLayout() { > + {/* BlockNoteView should wrap ⬇ from here + See https://github.com/TypeCellOS/BlockNote/blob/main/examples/07-collaboration/06-comments-with-sidebar/src/App.tsx + */}