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
+ */}