to change

Author: AntoLC

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) => {
       </Box>
 
       <BlockNoteView
-        className="--docs--main-editor"
+        //className="--docs--main-editor"
         aria-label={t('Document editor')}
         editor={editor}
         formattingToolbar={false}
         slashMenu={false}
         theme="light"
         comments={false}
-        renderEditor={false}
+        //renderEditor={false}
       >
         <ThreadsSidebar filter="all" sort="recent-activity" />
       </BlockNoteView>

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 = () => {
         `}
       `}
     >
-      <CommentSideBar doc={doc} onClose={() => setIsPanelOpen(false)} />
+      <CommentSideBar
+        doc={doc}
+        onClose={() => setIsPanelOpen(false)}
+        provider={provider}
+      />
     </Box>
   );
 };

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -71,6 +71,9 @@ export function DocLayout() {
       >
         <MainLayout enableResizablePanel={true}>
           <DocLayoutGlobalStyle />
+          {/* BlockNoteView should wrap ⬇ from here
+            See https://github.com/TypeCellOS/BlockNote/blob/main/examples/07-collaboration/06-comments-with-sidebar/src/App.tsx
+          */}
           <Box $direction="row" $width="100%">
             <Box $width="100%" $margin={{ horizontal: 'auto' }} $padding="base">
               <FloatingBar />