Fix CommentsProvider callbacks

.changeset/calm-tables-kick.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-comments': patch
+---
+
+- Fix the `onCommentAdd`, `onCommentUpdate` and `onCommentDelete` callbacks on CommentsProvider

apps/www/src/lib/plate/demo/comments/CommentsProvider.tsx

@@ -8,6 +8,11 @@ export function CommentsProvider({ children }: { children: ReactNode }) {
       comments={commentsData}
       users={usersData}
       myUserId="1"
+      /* eslint-disable no-console */
+      onCommentAdd={(comment) => console.log('Comment added', comment)}
+      onCommentDelete={(comment) => console.log('Comment deleted', comment)}
+      onCommentUpdate={(comment) => console.log('Comment updated', comment)}
+      /* eslint-enable no-console */
     >
       {children}
     </CommentsProviderPrimitive>

packages/comments/src/components/CommentDeleteButton.tsx

@@ -10,7 +10,7 @@ import { unsetCommentNodesById } from '../utils/index';
 
 export const useCommentDeleteButtonState = () => {
   const activeCommentId = useCommentsSelectors().activeCommentId();
-  const onCommentDelete = useCommentsSelectors().onCommentDelete();
+  const onCommentDelete = useCommentsSelectors().onCommentDelete()?.fn;
   const id = useCommentSelectors().id();
   const setActiveCommentId = useCommentsActions().activeCommentId();
   const removeComment = useRemoveComment();

packages/comments/src/components/CommentEditSaveButton.tsx

@@ -12,7 +12,7 @@ import {
 } from '../stores/comments/CommentsProvider';
 
 export const useCommentEditSaveButtonState = () => {
-  const onCommentUpdate = useCommentsSelectors().onCommentUpdate();
+  const onCommentUpdate = useCommentsSelectors().onCommentUpdate()?.fn;
   const editingValue = useCommentSelectors().editingValue();
   const setEditingValue = useCommentActions().editingValue();
   const id = useCommentSelectors().id();

packages/comments/src/components/CommentNewSubmitButton.tsx

@@ -12,7 +12,7 @@ import {
 } from '../stores/comments/CommentsProvider';
 
 export const useCommentNewSubmitButtonState = () => {
-  const onCommentAdd = useCommentsSelectors().onCommentAdd();
+  const onCommentAdd = useCommentsSelectors().onCommentAdd()?.fn;
   const activeCommentId = useCommentsSelectors().activeCommentId()!;
   const comment = useComment(SCOPE_ACTIVE_COMMENT)!;
   const newValue = useCommentsSelectors().newValue();

packages/comments/src/components/CommentResolveButton.tsx

@@ -8,7 +8,7 @@ import {
 } from '../stores/comments/CommentsProvider';
 
 export const useCommentResolveButton = () => {
-  const onCommentUpdate = useCommentsSelectors().onCommentUpdate();
+  const onCommentUpdate = useCommentsSelectors().onCommentUpdate()?.fn;
   const activeCommentId = useCommentsSelectors().activeCommentId();
   const setActiveCommentId = useCommentsActions().activeCommentId();
   const updateComment = useUpdateComment(activeCommentId);

packages/comments/src/stores/comments/CommentsProvider.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   createAtomStore,
   getNodeString,
@@ -35,31 +36,57 @@ export interface CommentsStoreState {
 
   focusTextarea: boolean;
 
-  onCommentAdd: ((value: WithPartial<TComment, 'userId'>) => void) | null;
-  onCommentUpdate:
-    | ((value: Pick<TComment, 'id'> & Partial<Omit<TComment, 'id'>>) => void)
-    | null;
-  onCommentDelete: ((id: string) => void) | null;
+  onCommentAdd: { fn: (value: WithPartial<TComment, 'userId'>) => void } | null;
+  onCommentUpdate: {
+    fn: (value: Pick<TComment, 'id'> & Partial<Omit<TComment, 'id'>>) => void;
+  } | null;
+  onCommentDelete: { fn: (id: string) => void } | null;
 }
 
-export const { commentsStore, useCommentsStore, CommentsProvider } =
-  createAtomStore(
-    {
-      myUserId: null,
-      users: {},
-      comments: {},
-      activeCommentId: null,
-      addingCommentId: null,
-      newValue: [{ type: 'p', children: [{ text: '' }] }],
-      focusTextarea: false,
-      onCommentAdd: null,
-      onCommentUpdate: null,
-      onCommentDelete: null,
-    } as CommentsStoreState,
-    {
-      name: 'comments',
-    }
-  );
+export const {
+  commentsStore,
+  useCommentsStore,
+  CommentsProvider: PrimitiveCommentsProvider,
+} = createAtomStore(
+  {
+    myUserId: null,
+    users: {},
+    comments: {},
+    activeCommentId: null,
+    addingCommentId: null,
+    newValue: [{ type: 'p', children: [{ text: '' }] }],
+    focusTextarea: false,
+    onCommentAdd: null,
+    onCommentUpdate: null,
+    onCommentDelete: null,
+  } as CommentsStoreState,
+  {
+    name: 'comments',
+  }
+);
+
+export const CommentsProvider = ({
+  onCommentAdd,
+  onCommentUpdate,
+  onCommentDelete,
+  ...props
+}: Omit<
+  React.ComponentProps<typeof PrimitiveCommentsProvider>,
+  'onCommentAdd' | 'onCommentUpdate' | 'onCommentDelete'
+> & {
+  onCommentAdd?: (value: WithPartial<TComment, 'userId'>) => void;
+  onCommentUpdate?: (
+    value: Pick<TComment, 'id'> & Partial<Omit<TComment, 'id'>>
+  ) => void;
+  onCommentDelete?: (id: string) => void;
+}) => (
+  <PrimitiveCommentsProvider
+    {...props}
+    onCommentAdd={onCommentAdd ? { fn: onCommentAdd } : null}
+    onCommentUpdate={onCommentUpdate ? { fn: onCommentUpdate } : null}
+    onCommentDelete={onCommentDelete ? { fn: onCommentDelete } : null}
+  />
+);
 
 export const useCommentsStates = () => useCommentsStore().use;
 export const useCommentsSelectors = () => useCommentsStore().get;