@docyrus/ui-pro-ai-assistant 0.0.1

package/src/internal/plate-editor/plate-ui/comment.tsx

@@ -0,0 +1,619 @@
+'use client';
+
+import {
+  useCallback, useEffect, useMemo, useRef, useState, type Dispatch, type MouseEvent, type SetStateAction
+} from 'react';
+
+import { getCommentKey, getDraftCommentKey } from '@platejs/comment';
+import { CommentPlugin, useCommentId } from '@platejs/comment/react';
+import {
+  differenceInDays,
+  differenceInHours,
+  differenceInMinutes,
+  format
+} from 'date-fns';
+import {
+  ArrowUpIcon,
+  CheckIcon,
+  MoreHorizontalIcon,
+  PencilIcon,
+  TrashIcon,
+  XIcon
+} from 'lucide-react';
+import { NodeApi, nanoid, type Value } from 'platejs';
+import {
+  type CreatePlateEditorOptions,
+  Plate,
+  useEditorPlugin,
+  useEditorRef,
+  usePlateEditor,
+  usePluginOption
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@docyrus/ui-pro-shared/avatar';
+
+import { Button } from './button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from './dropdown-menu';
+import { Editor, EditorContainer } from './editor';
+
+import {
+  discussionPlugin,
+  type TDiscussion
+} from '../editor/plugins/discussion-kit';
+import { BasicMarksKit } from '../editor/plugins/basic-marks-kit';
+
+export type TComment = {
+  id: string;
+  contentRich: Value;
+  createdAt: Date;
+  discussionId: string;
+  isEdited: boolean;
+  userId: string;
+};
+
+export function Comment(props: {
+  comment: TComment;
+  discussionLength: number;
+  editingId: string | null;
+  index: number;
+  setEditingId: Dispatch<SetStateAction<string | null>>;
+  documentContent?: string;
+  showDocumentContent?: boolean;
+  onEditorClick?: () => void;
+}) {
+  const {
+    comment,
+    discussionLength,
+    documentContent,
+    editingId,
+    index,
+    setEditingId,
+    showDocumentContent = false,
+    onEditorClick
+  } = props;
+
+  const editor = useEditorRef();
+
+  const discussions = usePluginOption(discussionPlugin, 'discussions');
+  const userInfo = usePluginOption(discussionPlugin, 'user', comment.userId);
+  const currentUserId = usePluginOption(discussionPlugin, 'currentUserId');
+
+  const resolveDiscussion = (id: string) => {
+    const updatedDiscussions = discussions.map((discussion) => {
+      if (discussion.id === id) {
+        return { ...discussion, isResolved: true };
+      }
+
+      return discussion;
+    });
+
+    editor.setOption(discussionPlugin, 'discussions', updatedDiscussions);
+  };
+
+  const removeDiscussion = (id: string) => {
+    const updatedDiscussions = discussions.filter(
+      (discussion: any) => discussion.id !== id
+    );
+
+    editor.setOption(discussionPlugin, 'discussions', updatedDiscussions);
+  };
+
+  const updateComment = (input: {
+    id: string;
+    contentRich: any;
+    discussionId: string;
+    isEdited: boolean;
+  }) => {
+    const updatedDiscussions = discussions.map((discussion) => {
+      if (discussion.id === input.discussionId) {
+        const updatedComments = discussion.comments.map((comment) => {
+          if (comment.id === input.id) {
+            return {
+              ...comment,
+              contentRich: input.contentRich,
+              isEdited: true,
+              updatedAt: new Date()
+            };
+          }
+
+          return comment;
+        });
+
+        return { ...discussion, comments: updatedComments };
+      }
+
+      return discussion;
+    });
+
+    editor.setOption(discussionPlugin, 'discussions', updatedDiscussions);
+  };
+
+  const { tf } = useEditorPlugin(CommentPlugin);
+
+  // Replace to your own backend or refer to potion
+  const isMyComment = currentUserId === comment.userId;
+
+  const initialValue = comment.contentRich;
+
+  const commentEditor = useCommentEditor(
+    {
+      id: comment.id,
+      value: initialValue
+    },
+    [initialValue]
+  );
+
+  const onCancel = () => {
+    setEditingId(null);
+    commentEditor.tf.replaceNodes(initialValue, {
+      at: [],
+      children: true
+    });
+  };
+
+  const onSave = () => {
+    void updateComment({
+      id: comment.id,
+      contentRich: commentEditor.children,
+      discussionId: comment.discussionId,
+      isEdited: true
+    });
+    setEditingId(null);
+  };
+
+  const onResolveComment = () => {
+    void resolveDiscussion(comment.discussionId);
+    tf.comment.unsetMark({ id: comment.discussionId });
+  };
+
+  const isFirst = index === 0;
+  const isLast = index === discussionLength - 1;
+  const isEditing = editingId && editingId === comment.id;
+
+  const [hovering, setHovering] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}>
+      <div className="relative flex items-center">
+        {userInfo && (
+          <Avatar className="size-6">
+            <AvatarImage alt={userInfo.name} src={userInfo.avatarUrl} />
+            <AvatarFallback>{userInfo.name?.[0]}</AvatarFallback>
+          </Avatar>
+        )}
+        <h4 className="mx-2 font-semibold text-sm leading-none">
+          {/* Replace to your own backend or refer to potion */}
+          {userInfo?.name}
+        </h4>
+
+        <div className="text-muted-foreground/80 text-xs leading-none">
+          <span className="mr-1">
+            {formatCommentDate(new Date(comment.createdAt))}
+          </span>
+          {comment.isEdited && <span>(edited)</span>}
+        </div>
+
+        {isMyComment && (hovering || dropdownOpen) && (
+          <div className="absolute top-0 right-0 flex space-x-1">
+            {index === 0 && (
+              <Button
+                className="h-6 p-1 text-muted-foreground"
+                onClick={onResolveComment}
+                type="button"
+                variant="ghost">
+                <CheckIcon className="size-4" />
+              </Button>
+            )}
+
+            <CommentMoreDropdown
+              comment={comment}
+              dropdownOpen={dropdownOpen}
+              onCloseAutoFocus={() => {
+                setTimeout(() => {
+                  commentEditor.tf.focus({ edge: 'endEditor' });
+                }, 0);
+              }}
+              onRemoveComment={() => {
+                if (discussionLength === 1) {
+                  tf.comment.unsetMark({ id: comment.discussionId });
+                  void removeDiscussion(comment.discussionId);
+                }
+              }}
+              setDropdownOpen={setDropdownOpen}
+              setEditingId={setEditingId} />
+          </div>
+        )}
+      </div>
+
+      {isFirst && showDocumentContent && (
+        <div className="relative mt-1 flex pl-[32px] text-sm text-subtle-foreground">
+          {discussionLength > 1 && (
+            <div className="absolute top-[5px] left-3 h-full w-0.5 shrink-0 bg-muted" />
+          )}
+          <div className="my-px w-0.5 shrink-0 bg-highlight" />
+          {documentContent && <div className="ml-2">{documentContent}</div>}
+        </div>
+      )}
+
+      <div className="relative my-1 pl-[26px]">
+        {!isLast && (
+          <div className="absolute top-0 left-3 h-full w-0.5 shrink-0 bg-muted" />
+        )}
+        <Plate editor={commentEditor} readOnly={!isEditing}>
+          <EditorContainer variant="comment">
+            <Editor
+              className="w-auto grow"
+              onClick={() => onEditorClick?.()}
+              variant="comment" />
+
+            {isEditing && (
+              <div className="ml-auto flex shrink-0 gap-1">
+                <Button
+                  className="size-[28px]"
+                  onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                    e.stopPropagation();
+                    void onCancel();
+                  }}
+                  size="icon"
+                  variant="ghost">
+                  <div className="flex size-5 shrink-0 items-center justify-center rounded-[50%] bg-primary/40">
+                    <XIcon className="!size-3 stroke-[3px] text-background" />
+                  </div>
+                </Button>
+
+                <Button
+                  onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                    e.stopPropagation();
+                    void onSave();
+                  }}
+                  size="icon"
+                  variant="ghost">
+                  <div className="flex size-5 shrink-0 items-center justify-center rounded-[50%] bg-brand">
+                    <CheckIcon className="!size-3 stroke-[3px] text-background" />
+                  </div>
+                </Button>
+              </div>
+            )}
+          </EditorContainer>
+        </Plate>
+      </div>
+    </div>
+  );
+}
+
+function CommentMoreDropdown(props: {
+  comment: TComment;
+  dropdownOpen: boolean;
+  setDropdownOpen: Dispatch<SetStateAction<boolean>>;
+  setEditingId: Dispatch<SetStateAction<string | null>>;
+  onCloseAutoFocus?: () => void;
+  onRemoveComment?: () => void;
+}) {
+  const {
+    comment,
+    dropdownOpen,
+    setDropdownOpen,
+    setEditingId,
+    onCloseAutoFocus,
+    onRemoveComment
+  } = props;
+
+  const discussions = usePluginOption(discussionPlugin, 'discussions');
+  const editor = useEditorRef();
+
+  const selectedEditCommentRef = useRef<boolean>(false);
+
+  const onDeleteComment = useCallback(() => {
+    if (!comment.id) return;
+
+    // Find and update the discussion
+    const updatedDiscussions = discussions.map((discussion: any) => {
+      if (discussion.id !== comment.discussionId) {
+        return discussion;
+      }
+
+      const commentIndex = discussion.comments.findIndex(
+        (c: any) => c.id === comment.id
+      );
+
+      if (commentIndex === -1) {
+        return discussion;
+      }
+
+      return {
+        ...discussion,
+        comments: [...discussion.comments.slice(0, commentIndex), ...discussion.comments.slice(commentIndex + 1)]
+      };
+    });
+
+    // Save back to session storage
+    editor.setOption(discussionPlugin, 'discussions', updatedDiscussions);
+    onRemoveComment?.();
+  }, [
+    comment.discussionId,
+    comment.id,
+    discussions,
+    editor,
+    onRemoveComment
+  ]);
+
+  const onEditComment = useCallback(() => {
+    selectedEditCommentRef.current = true;
+
+    if (!comment.id) return;
+
+    setEditingId(comment.id);
+  }, [comment.id, setEditingId]);
+
+  return (
+    <DropdownMenu
+      modal={false}
+      onOpenChange={setDropdownOpen}
+      open={dropdownOpen}>
+      <DropdownMenuTrigger asChild onClick={e => e.stopPropagation()}>
+        <Button className={cn('h-6 p-1 text-muted-foreground')} variant="ghost">
+          <MoreHorizontalIcon className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-48"
+        onCloseAutoFocus={(e) => {
+          if (selectedEditCommentRef.current) {
+            onCloseAutoFocus?.();
+            selectedEditCommentRef.current = false;
+          }
+
+          return e.preventDefault();
+        }}>
+        <DropdownMenuGroup>
+          <DropdownMenuItem onClick={onEditComment}>
+            <PencilIcon className="size-4" />
+            Edit comment
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={onDeleteComment}>
+            <TrashIcon className="size-4" />
+            Delete comment
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const useCommentEditor = (
+  options: Omit<CreatePlateEditorOptions, 'plugins'> = {},
+  deps: any[] = []
+) => {
+  const commentEditor = usePlateEditor(
+    {
+      id: 'comment',
+      plugins: BasicMarksKit,
+      value: [],
+      ...options
+    },
+    deps
+  );
+
+  return commentEditor;
+};
+
+export function CommentCreateForm({
+  autoFocus = false,
+  className,
+  discussionId: discussionIdProp,
+  focusOnMount = false
+}: {
+  autoFocus?: boolean;
+  className?: string;
+  discussionId?: string;
+  focusOnMount?: boolean;
+}) {
+  const discussions = usePluginOption(discussionPlugin, 'discussions');
+
+  const editor = useEditorRef();
+  const commentId = useCommentId();
+  const discussionId = discussionIdProp ?? commentId;
+
+  const userInfo = usePluginOption(discussionPlugin, 'currentUser');
+  const [commentValue, setCommentValue] = useState<Value | undefined>();
+  const commentContent = useMemo(
+    () => commentValue ? NodeApi.string({ children: commentValue as any, type: 'p' }) : '',
+    [commentValue]
+  );
+  const commentEditor = useCommentEditor();
+
+  useEffect(() => {
+    if (commentEditor && focusOnMount) {
+      commentEditor.tf.focus();
+    }
+  }, [commentEditor, focusOnMount]);
+
+  const onAddComment = useCallback(() => {
+    if (!commentValue) return;
+
+    commentEditor.tf.reset();
+
+    if (discussionId) {
+      // Get existing discussion
+      const discussion = discussions.find((d: any) => d.id === discussionId);
+
+      if (!discussion) {
+        // Mock creating suggestion
+        const newDiscussion: TDiscussion = {
+          id: discussionId,
+          comments: [
+            {
+              id: nanoid(),
+              contentRich: commentValue,
+              createdAt: new Date(),
+              discussionId,
+              isEdited: false,
+              userId: editor.getOption(discussionPlugin, 'currentUserId')
+            }
+          ],
+          createdAt: new Date(),
+          isResolved: false,
+          userId: editor.getOption(discussionPlugin, 'currentUserId')
+        };
+
+        editor.setOption(discussionPlugin, 'discussions', [...discussions, newDiscussion]);
+
+        return;
+      }
+
+      // Create reply comment
+      const comment: TComment = {
+        id: nanoid(),
+        contentRich: commentValue,
+        createdAt: new Date(),
+        discussionId,
+        isEdited: false,
+        userId: editor.getOption(discussionPlugin, 'currentUserId')
+      };
+
+      // Add reply to discussion comments
+      const updatedDiscussion = {
+        ...discussion,
+        comments: [...discussion.comments, comment]
+      };
+
+      // Filter out old discussion and add updated one
+      const updatedDiscussions = discussions
+        .filter((d: any) => d.id !== discussionId)
+        .concat(updatedDiscussion);
+
+      editor.setOption(discussionPlugin, 'discussions', updatedDiscussions);
+
+      return;
+    }
+
+    const commentsNodeEntry = editor
+      .getApi(CommentPlugin)
+      .comment.nodes({ at: [], isDraft: true });
+
+    if (commentsNodeEntry.length === 0) return;
+
+    const documentContent = commentsNodeEntry
+      .map(([node]) => node.text)
+      .join('');
+
+    const _discussionId = nanoid();
+    // Mock creating new discussion
+    const newDiscussion: TDiscussion = {
+      id: _discussionId,
+      comments: [
+        {
+          id: nanoid(),
+          contentRich: commentValue,
+          createdAt: new Date(),
+          discussionId: _discussionId,
+          isEdited: false,
+          userId: editor.getOption(discussionPlugin, 'currentUserId')
+        }
+      ],
+      createdAt: new Date(),
+      documentContent,
+      isResolved: false,
+      userId: editor.getOption(discussionPlugin, 'currentUserId')
+    };
+
+    editor.setOption(discussionPlugin, 'discussions', [...discussions, newDiscussion]);
+
+    const { id } = newDiscussion;
+
+    commentsNodeEntry.forEach(([_, path]) => {
+      editor.tf.setNodes(
+        {
+          [getCommentKey(id)]: true
+        },
+        { at: path, split: true }
+      );
+      editor.tf.unsetNodes([getDraftCommentKey()], { at: path });
+    });
+  }, [
+    commentValue,
+    commentEditor.tf,
+    discussionId,
+    editor,
+    discussions
+  ]);
+
+  return (
+    <div className={cn('flex w-full', className)}>
+      <div className="mt-1 mr-1 shrink-0">
+        {/* Replace to your own backend or refer to potion */}
+        <Avatar className="size-5">
+          <AvatarImage alt={userInfo?.name} src={userInfo?.avatarUrl} />
+          <AvatarFallback>{userInfo?.name?.[0]}</AvatarFallback>
+        </Avatar>
+      </div>
+
+      <div className="relative flex grow gap-2">
+        <Plate
+          editor={commentEditor}
+          onChange={({ value }) => {
+            setCommentValue(value);
+          }}>
+          <EditorContainer variant="comment">
+            <Editor
+              autoComplete="off"
+              autoFocus={autoFocus}
+              className="min-h-[25px] grow pt-0.5 pr-8"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  void onAddComment();
+                }
+              }}
+              placeholder="Reply..."
+              variant="comment" />
+
+            <Button
+              className="absolute right-0 bottom-0 ml-auto shrink-0"
+              disabled={commentContent.trim().length === 0}
+              onClick={(e) => {
+                e.stopPropagation();
+                void onAddComment();
+              }}
+              size="icon"
+              variant="ghost">
+              <div className="flex size-6 items-center justify-center rounded-full">
+                <ArrowUpIcon />
+              </div>
+            </Button>
+          </EditorContainer>
+        </Plate>
+      </div>
+    </div>
+  );
+}
+
+export const formatCommentDate = (date: Date) => {
+  const now = new Date();
+  const diffMinutes = differenceInMinutes(now, date);
+  const diffHours = differenceInHours(now, date);
+  const diffDays = differenceInDays(now, date);
+
+  if (diffMinutes < 60) {
+    return `${diffMinutes}m`;
+  }
+  if (diffHours < 24) {
+    return `${diffHours}h`;
+  }
+  if (diffDays < 2) {
+    return `${diffDays}d`;
+  }
+
+  return format(date, 'MM/dd/yyyy');
+};

package/src/internal/plate-editor/plate-ui/cursor-overlay.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { AIChatPlugin } from '@platejs/ai/react';
+import {
+  type CursorData,
+  type CursorOverlayState,
+  useCursorOverlay
+} from '@platejs/selection/react';
+import { getTableGridAbove } from '@platejs/table';
+import { RangeApi } from 'platejs';
+import { useEditorRef, usePluginOption } from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+const OVERLAY_ID = '__plate_cursor_overlay__';
+
+// TODO:Move to core
+export const getCursorOverlayElement = () => document.querySelector(`#${OVERLAY_ID}`);
+
+export function Cursor({
+  id,
+  caretPosition,
+  data,
+  selection,
+  selectionRects
+}: CursorOverlayState<CursorData>) {
+  const editor = useEditorRef();
+  const streaming = usePluginOption(AIChatPlugin, 'streaming');
+  const { style, selectionStyle = style } = data ?? ({} as CursorData);
+  const isCursor = RangeApi.isCollapsed(selection);
+
+  if (streaming) return null;
+
+  // Skip overlay for multi-cell table selection (table has its own selection UI)
+  if (id === 'selection' && selection) {
+    const cellEntries = getTableGridAbove(editor, {
+      at: selection,
+      format: 'cell'
+    });
+
+    if (cellEntries.length > 1) {
+      return null;
+    }
+  }
+
+  return (
+    <>
+      {selectionRects.map((position, i) => (
+        <div
+          className={cn(
+            'pointer-events-none absolute z-10',
+            id === 'selection' && 'bg-brand/25',
+            id === 'selection' && isCursor && 'bg-primary'
+          )}
+          id={OVERLAY_ID}
+          key={i}
+          style={{
+            ...selectionStyle,
+            ...position
+          }} />
+      ))}
+      {caretPosition && (
+        <div
+          className={cn(
+            'pointer-events-none absolute z-10 w-0.5',
+            id === 'drag' && 'w-px bg-brand'
+          )}
+          id={OVERLAY_ID}
+          style={{ ...caretPosition, ...style }} />
+      )}
+    </>
+  );
+}
+
+export function CursorOverlay() {
+  const { cursors } = useCursorOverlay();
+
+  return (
+    <>
+      {cursors.map(cursor => (
+        <Cursor key={cursor.id} {...cursor} />
+      ))}
+    </>
+  );
+}