@fuma-content/studio 1.0.0 → 1.0.2

package/src/components/editor/ui/comment.tsx

@@ -1,577 +0,0 @@
-"use client";
-
-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 { KEYS, NodeApi, nanoid, type Value } from "platejs";
-import type { CreatePlateEditorOptions } from "platejs/react";
-import {
-  Plate,
-  useEditorPlugin,
-  useEditorRef,
-  usePlateEditor,
-  usePluginOption,
-} from "platejs/react";
-import * as React from "react";
-import { BasicMarksKit } from "@/components/editor/plugins/basic-marks-kit";
-import { discussionPlugin, type TDiscussion } from "@/components/editor/plugins/discussion-kit";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { cn } from "@/lib/utils";
-
-import { Editor, EditorContainer } from "./editor";
-
-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: React.Dispatch<React.SetStateAction<string | null>>;
-  documentContent?: string;
-  showDocumentContent?: boolean;
-  onEditorClick?: () => void;
-}) {
-  const {
-    comment,
-    discussionLength,
-    documentContent,
-    editingId,
-    index,
-    setEditingId,
-    showDocumentContent = false,
-    onEditorClick,
-  } = props;
-
-  const editor = useEditorRef();
-  const userInfo = usePluginOption(discussionPlugin, "user", comment.userId);
-  const currentUserId = usePluginOption(discussionPlugin, "currentUserId");
-
-  const resolveDiscussion = async (id: string) => {
-    const updatedDiscussions = editor
-      .getOption(discussionPlugin, "discussions")
-      .map((discussion) => {
-        if (discussion.id === id) {
-          return { ...discussion, isResolved: true };
-        }
-        return discussion;
-      });
-    editor.setOption(discussionPlugin, "discussions", updatedDiscussions);
-  };
-
-  const removeDiscussion = async (id: string) => {
-    const updatedDiscussions = editor
-      .getOption(discussionPlugin, "discussions")
-      .filter((discussion) => discussion.id !== id);
-    editor.setOption(discussionPlugin, "discussions", updatedDiscussions);
-  };
-
-  const updateComment = async (input: {
-    id: string;
-    contentRich: Value;
-    discussionId: string;
-    isEdited: boolean;
-  }) => {
-    const updatedDiscussions = editor
-      .getOption(discussionPlugin, "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] = React.useState(false);
-  const [dropdownOpen, setDropdownOpen] = React.useState(false);
-
-  return (
-    <div onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}>
-      <div className="relative flex items-center">
-        <Avatar className="size-5">
-          <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
-                variant="ghost"
-                className="h-6 p-1 text-muted-foreground"
-                onClick={onResolveComment}
-                type="button"
-              >
-                <CheckIcon className="size-4" />
-              </Button>
-            )}
-
-            <CommentMoreDropdown
-              onCloseAutoFocus={() => {
-                setTimeout(() => {
-                  commentEditor.tf.focus({ edge: "endEditor" });
-                }, 0);
-              }}
-              onRemoveComment={() => {
-                if (discussionLength === 1) {
-                  tf.comment.unsetMark({ id: comment.discussionId });
-                  void removeDiscussion(comment.discussionId);
-                }
-              }}
-              comment={comment}
-              dropdownOpen={dropdownOpen}
-              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 readOnly={!isEditing} editor={commentEditor}>
-          <EditorContainer variant="comment">
-            <Editor variant="comment" className="w-auto grow" onClick={() => onEditorClick?.()} />
-
-            {isEditing && (
-              <div className="ml-auto flex shrink-0 gap-1">
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="size-[28px]"
-                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                    e.stopPropagation();
-                    void onCancel();
-                  }}
-                >
-                  <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
-                  size="icon"
-                  variant="ghost"
-                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                    e.stopPropagation();
-                    void onSave();
-                  }}
-                >
-                  <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: React.Dispatch<React.SetStateAction<boolean>>;
-  setEditingId: React.Dispatch<React.SetStateAction<string | null>>;
-  onCloseAutoFocus?: () => void;
-  onRemoveComment?: () => void;
-}) {
-  const {
-    comment,
-    dropdownOpen,
-    setDropdownOpen,
-    setEditingId,
-    onCloseAutoFocus,
-    onRemoveComment,
-  } = props;
-
-  const editor = useEditorRef();
-
-  const selectedEditCommentRef = React.useRef<boolean>(false);
-
-  const onDeleteComment = React.useCallback(() => {
-    if (!comment.id) return alert("You are operating too quickly, please try again later.");
-
-    // Find and update the discussion
-    const updatedDiscussions = editor
-      .getOption(discussionPlugin, "discussions")
-      .map((discussion) => {
-        if (discussion.id !== comment.discussionId) {
-          return discussion;
-        }
-
-        const commentIndex = discussion.comments.findIndex((c) => 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, editor, onRemoveComment]);
-
-  const onEditComment = React.useCallback(() => {
-    selectedEditCommentRef.current = true;
-
-    if (!comment.id) return alert("You are operating too quickly, please try again later.");
-
-    setEditingId(comment.id);
-  }, [comment.id, setEditingId]);
-
-  return (
-    <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen} modal={false}>
-      <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
-        <Button variant="ghost" className={cn("h-6 p-1 text-muted-foreground")}>
-          <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>
-  );
-}
-
-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] = React.useState<Value | undefined>();
-  const commentContent = React.useMemo(
-    () => (commentValue ? NodeApi.string({ children: commentValue, type: KEYS.p }) : ""),
-    [commentValue],
-  );
-  const commentEditor = useCommentEditor();
-
-  React.useEffect(() => {
-    if (commentEditor && focusOnMount) {
-      commentEditor.tf.focus();
-    }
-  }, [commentEditor, focusOnMount]);
-
-  const onAddComment = React.useCallback(async () => {
-    if (!commentValue) return;
-
-    commentEditor.tf.reset();
-
-    if (discussionId) {
-      // Get existing discussion
-      const discussion = discussions.find((d) => 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) => 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.id;
-
-    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-2 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
-          onChange={({ value }) => {
-            setCommentValue(value);
-          }}
-          editor={commentEditor}
-        >
-          <EditorContainer variant="comment">
-            <Editor
-              variant="comment"
-              className="min-h-[25px] grow pt-0.5 pr-8"
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && !e.shiftKey) {
-                  e.preventDefault();
-                  onAddComment();
-                }
-              }}
-              placeholder="Reply..."
-              autoComplete="off"
-              autoFocus={autoFocus}
-            />
-
-            <Button
-              size="icon"
-              variant="ghost"
-              className="absolute right-0.5 bottom-0.5 ml-auto size-6 shrink-0"
-              disabled={commentContent.trim().length === 0}
-              onClick={(e) => {
-                e.stopPropagation();
-                onAddComment();
-              }}
-            >
-              <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/components/editor/ui/cursor-overlay.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import { AIChatPlugin } from "@platejs/ai/react";
-import {
-  type CursorData,
-  type CursorOverlayState,
-  useCursorOverlay,
-} from "@platejs/selection/react";
-import { RangeApi } from "platejs";
-import { usePluginOption } from "platejs/react";
-
-import { cn } from "@/lib/utils";
-
-export function CursorOverlay() {
-  const { cursors } = useCursorOverlay();
-
-  return (
-    <>
-      {cursors.map((cursor) => (
-        <Cursor key={cursor.id} {...cursor} />
-      ))}
-    </>
-  );
-}
-
-function Cursor({
-  id,
-  caretPosition,
-  data,
-  selection,
-  selectionRects,
-}: CursorOverlayState<CursorData>) {
-  const streaming = usePluginOption(AIChatPlugin, "streaming");
-  const { style, selectionStyle = style } = data ?? ({} as CursorData);
-  const isCursor = RangeApi.isCollapsed(selection);
-
-  if (streaming) return null;
-
-  return (
-    <>
-      {selectionRects.map((position, i) => (
-        <div
-          key={i}
-          className={cn(
-            "pointer-events-none absolute z-10",
-            id === "selection" && "bg-brand/25",
-            id === "selection" && isCursor && "bg-primary",
-          )}
-          style={{
-            ...selectionStyle,
-            ...position,
-          }}
-        />
-      ))}
-      {caretPosition && (
-        <div
-          className={cn(
-            "pointer-events-none absolute z-10 w-0.5",
-            id === "drag" && "w-px bg-brand",
-          )}
-          style={{ ...caretPosition, ...style }}
-        />
-      )}
-    </>
-  );
-}

package/src/components/editor/ui/date-node-static.tsx

@@ -1,45 +0,0 @@
-import type { TDateElement } from "platejs";
-import type { SlateElementProps } from "platejs/static";
-
-import { SlateElement } from "platejs/static";
-
-export function DateElementStatic(props: SlateElementProps<TDateElement>) {
-  const { element } = props;
-
-  return (
-    <SlateElement className="inline-block" {...props}>
-      <span className="w-fit rounded-sm bg-muted px-1 text-muted-foreground">
-        {element.date ? (
-          (() => {
-            const today = new Date();
-            const elementDate = new Date(element.date);
-            const isToday =
-              elementDate.getDate() === today.getDate() &&
-              elementDate.getMonth() === today.getMonth() &&
-              elementDate.getFullYear() === today.getFullYear();
-
-            const isYesterday =
-              new Date(today.setDate(today.getDate() - 1)).toDateString() ===
-              elementDate.toDateString();
-            const isTomorrow =
-              new Date(today.setDate(today.getDate() + 2)).toDateString() ===
-              elementDate.toDateString();
-
-            if (isToday) return "Today";
-            if (isYesterday) return "Yesterday";
-            if (isTomorrow) return "Tomorrow";
-
-            return elementDate.toLocaleDateString(undefined, {
-              day: "numeric",
-              month: "long",
-              year: "numeric",
-            });
-          })()
-        ) : (
-          <span>Pick a date</span>
-        )}
-      </span>
-      {props.children}
-    </SlateElement>
-  );
-}