Merge pull request #2725 from EandrewJones/fix/#2563

fix: Comments cannot be edited or deleted

.changeset/long-poems-relax.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-comments': major
+---
+
+Remove `useCommentValue`, which was redundant with the hooks applied automatically in `CommentEditTextarea.tsx`.

apps/www/src/registry/default/plate-ui/comment-more-dropdown.tsx

@@ -20,9 +20,9 @@ import {
 
 export function CommentMoreDropdown() {
   const editButtonState = useCommentEditButtonState();
-  const editProps = useCommentEditButton(editButtonState);
+  const { props: editProps } = useCommentEditButton(editButtonState);
   const deleteButtonState = useCommentDeleteButtonState();
-  const deleteProps = useCommentDeleteButton(deleteButtonState);
+  const { props: deleteProps } = useCommentDeleteButton(deleteButtonState);
 
   return (
     <DropdownMenu modal={false}>
@@ -32,12 +32,8 @@ export function CommentMoreDropdown() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
-        <DropdownMenuItem {...(editProps as any)}>
-          Edit comment
-        </DropdownMenuItem>
-        <DropdownMenuItem {...(deleteProps as any)}>
-          Delete comment
-        </DropdownMenuItem>
+        <DropdownMenuItem {...editProps}>Edit comment</DropdownMenuItem>
+        <DropdownMenuItem {...deleteProps}>Delete comment</DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

apps/www/src/registry/default/plate-ui/comment-value.tsx

@@ -4,22 +4,16 @@ import React from 'react';
 import {
   CommentEditActions,
   CommentEditTextarea,
-  useCommentValue,
 } from '@udecode/plate-comments';
 
 import { cn } from '@/lib/utils';
 import { buttonVariants } from '@/registry/default/plate-ui/button';
 import { inputVariants } from '@/registry/default/plate-ui/input';
 
 export function CommentValue() {
-  const { textareaRef } = useCommentValue();
-
   return (
     <div className="my-2 flex flex-col items-end gap-2">
-      <CommentEditTextarea
-        ref={textareaRef}
-        className={cn(inputVariants(), 'min-h-[60px]')}
-      />
+      <CommentEditTextarea className={cn(inputVariants(), 'min-h-[60px]')} />
 
       <div className="flex space-x-2">
         <CommentEditActions.CancelButton

packages/comments/src/components/index.ts

@@ -16,7 +16,6 @@ export * from './CommentsPositioner';
 export * from './useCommentAddButton';
 export * from './useCommentItemContent';
 export * from './useCommentLeaf';
-export * from './useCommentValue';
 export * from './useCommentsShowResolvedButton';
 export * from './useFloatingCommentsContentState';
 export * from './useFloatingCommentsState';