@fuma-content/studio 1.0.0 → 1.0.2

package/src/components/editor/ui/ai-toolbar-button.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import { AIChatPlugin } from "@platejs/ai/react";
-import { useEditorPlugin } from "platejs/react";
-import type * as React from "react";
-
-import { ToolbarButton } from "../../ui/toolbar";
-
-export function AIToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
-  const { api } = useEditorPlugin(AIChatPlugin);
-
-  return (
-    <ToolbarButton
-      {...props}
-      onClick={() => {
-        api.aiChat.show();
-      }}
-      onMouseDown={(e) => {
-        e.preventDefault();
-      }}
-    />
-  );
-}

package/src/components/editor/ui/align-toolbar-button.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import type { Alignment } from "@platejs/basic-styles";
-import { TextAlignPlugin } from "@platejs/basic-styles/react";
-import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react";
-import { useEditorPlugin, useSelectionFragmentProp } from "platejs/react";
-import * as React from "react";
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-import { ToolbarButton } from "../../ui/toolbar";
-
-const items = [
-  {
-    icon: AlignLeftIcon,
-    value: "left",
-  },
-  {
-    icon: AlignCenterIcon,
-    value: "center",
-  },
-  {
-    icon: AlignRightIcon,
-    value: "right",
-  },
-  {
-    icon: AlignJustifyIcon,
-    value: "justify",
-  },
-];
-
-export function AlignToolbarButton(props: React.ComponentProps<typeof DropdownMenu>) {
-  const { editor, tf } = useEditorPlugin(TextAlignPlugin);
-  const value =
-    useSelectionFragmentProp({
-      defaultValue: "start",
-      getProp: (node) => node.align,
-    }) ?? "left";
-
-  const [open, setOpen] = React.useState(false);
-  const IconValue = items.find((item) => item.value === value)?.icon ?? AlignLeftIcon;
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip="Align" isDropdown>
-          <IconValue />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="min-w-0" align="start">
-        <DropdownMenuRadioGroup
-          value={value}
-          onValueChange={(value) => {
-            tf.textAlign.setNodes(value as Alignment);
-            editor.tf.focus();
-          }}
-        >
-          {items.map(({ icon: Icon, value: itemValue }) => (
-            <DropdownMenuRadioItem
-              key={itemValue}
-              className="pl-2 data-[state=checked]:bg-accent *:first:[span]:hidden"
-              value={itemValue}
-            >
-              <Icon />
-            </DropdownMenuRadioItem>
-          ))}
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/components/editor/ui/block-context-menu.tsx

@@ -1,154 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { AIChatPlugin } from "@platejs/ai/react";
-import {
-  BLOCK_CONTEXT_MENU_ID,
-  BlockMenuPlugin,
-  BlockSelectionPlugin,
-} from "@platejs/selection/react";
-import { KEYS } from "platejs";
-import { useEditorPlugin, usePlateState, usePluginOption } from "platejs/react";
-
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuGroup,
-  ContextMenuItem,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-
-type Value = "askAI" | null;
-
-export function BlockContextMenu({ children }: { children: React.ReactNode }) {
-  const { api, editor } = useEditorPlugin(BlockMenuPlugin);
-  const [value, setValue] = React.useState<Value>(null);
-  const [readOnly] = usePlateState("readOnly");
-  const openId = usePluginOption(BlockMenuPlugin, "openId");
-  const posRef = React.useRef<{ x: number; y: number } | undefined>(undefined);
-
-  const handleTurnInto = (type: string) => {
-    editor
-      .getApi(BlockSelectionPlugin)
-      .blockSelection.getNodes()
-      .forEach(([node, path]) => {
-        if (node[KEYS.listType]) {
-          editor.tf.unsetNodes([KEYS.listType, "indent"], {
-            at: path,
-          });
-        }
-
-        editor.tf.toggleBlock(type, { at: path });
-      });
-  };
-  const handleAlign = (align: "center" | "left" | "right") => {
-    editor.getTransforms(BlockSelectionPlugin).blockSelection.setNodes({ align });
-  };
-
-  return (
-    <ContextMenu
-      open={openId === BLOCK_CONTEXT_MENU_ID}
-      onOpenChange={(open) => {
-        if (!open) {
-          api.blockMenu.hide();
-        } else {
-          api.blockMenu.show(BLOCK_CONTEXT_MENU_ID, posRef.current);
-        }
-      }}
-    >
-      <ContextMenuTrigger
-        onContextMenu={(event) => {
-          const dataset = (event.target as HTMLElement).dataset;
-          const disabled =
-            dataset?.slateEditor === "true" ||
-            readOnly ||
-            dataset?.plateOpenContextMenu === "false";
-
-          if (disabled) return event.preventDefault();
-          posRef.current = {
-            x: event.clientX,
-            y: event.clientY,
-          };
-        }}
-        render={<div className="w-full">{children}</div>}
-      />
-
-      <ContextMenuContent
-        className="w-64"
-        finalFocus={() => {
-          editor.getApi(BlockSelectionPlugin).blockSelection.focus();
-
-          if (value === "askAI") {
-            editor.getApi(AIChatPlugin).aiChat.show();
-          }
-
-          setValue(null);
-        }}
-      >
-        <ContextMenuGroup>
-          <ContextMenuItem
-            onClick={() => {
-              setValue("askAI");
-            }}
-          >
-            Ask AI
-          </ContextMenuItem>
-          <ContextMenuItem
-            onClick={() => {
-              editor.getTransforms(BlockSelectionPlugin).blockSelection.removeNodes();
-              editor.tf.focus();
-            }}
-          >
-            Delete
-          </ContextMenuItem>
-          <ContextMenuItem
-            onClick={() => {
-              editor.getTransforms(BlockSelectionPlugin).blockSelection.duplicate();
-            }}
-          >
-            Duplicate
-            {/* <ContextMenuShortcut>⌘ + D</ContextMenuShortcut> */}
-          </ContextMenuItem>
-          <ContextMenuSub>
-            <ContextMenuSubTrigger>Turn into</ContextMenuSubTrigger>
-            <ContextMenuSubContent className="w-48">
-              <ContextMenuItem onClick={() => handleTurnInto(KEYS.p)}>Paragraph</ContextMenuItem>
-
-              <ContextMenuItem onClick={() => handleTurnInto(KEYS.h1)}>Heading 1</ContextMenuItem>
-              <ContextMenuItem onClick={() => handleTurnInto(KEYS.h2)}>Heading 2</ContextMenuItem>
-              <ContextMenuItem onClick={() => handleTurnInto(KEYS.h3)}>Heading 3</ContextMenuItem>
-              <ContextMenuItem onClick={() => handleTurnInto(KEYS.blockquote)}>
-                Blockquote
-              </ContextMenuItem>
-            </ContextMenuSubContent>
-          </ContextMenuSub>
-        </ContextMenuGroup>
-
-        <ContextMenuGroup>
-          <ContextMenuItem
-            onClick={() => editor.getTransforms(BlockSelectionPlugin).blockSelection.setIndent(1)}
-          >
-            Indent
-          </ContextMenuItem>
-          <ContextMenuItem
-            onClick={() => editor.getTransforms(BlockSelectionPlugin).blockSelection.setIndent(-1)}
-          >
-            Outdent
-          </ContextMenuItem>
-          <ContextMenuSub>
-            <ContextMenuSubTrigger>Align</ContextMenuSubTrigger>
-            <ContextMenuSubContent className="w-48">
-              <ContextMenuItem onClick={() => handleAlign("left")}>Left</ContextMenuItem>
-              <ContextMenuItem onClick={() => handleAlign("center")}>Center</ContextMenuItem>
-              <ContextMenuItem onClick={() => handleAlign("right")}>Right</ContextMenuItem>
-            </ContextMenuSubContent>
-          </ContextMenuSub>
-        </ContextMenuGroup>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-}

package/src/components/editor/ui/block-discussion.tsx

@@ -1,318 +0,0 @@
-"use client";
-
-import { getDraftCommentKey } from "@platejs/comment";
-import { CommentPlugin } from "@platejs/comment/react";
-import { getTransientSuggestionKey } from "@platejs/suggestion";
-import { SuggestionPlugin } from "@platejs/suggestion/react";
-import { MessageSquareTextIcon, MessagesSquareIcon, PencilLineIcon } from "lucide-react";
-import {
-  type AnyPluginConfig,
-  type NodeEntry,
-  type Path,
-  PathApi,
-  type TCommentText,
-  type TElement,
-  TextApi,
-  type TSuggestionText,
-} from "platejs";
-import type { PlateElementProps, RenderNodeWrapper } from "platejs/react";
-import { useEditorPlugin, useEditorRef, usePluginOption } from "platejs/react";
-import * as React from "react";
-import { commentPlugin } from "@/components/editor/plugins/comment-kit";
-import { discussionPlugin, type TDiscussion } from "@/components/editor/plugins/discussion-kit";
-import { suggestionPlugin } from "@/components/editor/plugins/suggestion-kit";
-import { Button } from "@/components/ui/button";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import {
-  BlockSuggestionCard,
-  isResolvedSuggestion,
-  useResolveSuggestion,
-} from "./block-suggestion";
-import { Comment, CommentCreateForm } from "./comment";
-
-export const BlockDiscussion: RenderNodeWrapper<AnyPluginConfig> = (props) => {
-  const { editor, element } = props;
-
-  const commentsApi = editor.getApi(CommentPlugin).comment;
-  const blockPath = editor.api.findPath(element);
-
-  // avoid duplicate in table or column
-  if (!blockPath || blockPath.length > 1) return;
-
-  const draftCommentNode = commentsApi.node({ at: blockPath, isDraft: true });
-
-  const commentNodes = [...commentsApi.nodes({ at: blockPath })];
-
-  const suggestionNodes = [
-    ...editor.getApi(SuggestionPlugin).suggestion.nodes({ at: blockPath }),
-  ].filter(([node]) => !node[getTransientSuggestionKey()]);
-
-  if (commentNodes.length === 0 && suggestionNodes.length === 0 && !draftCommentNode) {
-    return;
-  }
-
-  return (props) => (
-    <BlockCommentContent
-      blockPath={blockPath}
-      commentNodes={commentNodes}
-      draftCommentNode={draftCommentNode}
-      suggestionNodes={suggestionNodes}
-      {...props}
-    />
-  );
-};
-
-const BlockCommentContent = ({
-  blockPath,
-  children,
-  commentNodes,
-  draftCommentNode,
-  suggestionNodes,
-}: PlateElementProps & {
-  blockPath: Path;
-  commentNodes: NodeEntry<TCommentText>[];
-  draftCommentNode: NodeEntry<TCommentText> | undefined;
-  suggestionNodes: NodeEntry<TElement | TSuggestionText>[];
-}) => {
-  const editor = useEditorRef();
-  const resolvedSuggestions = useResolveSuggestion(suggestionNodes, blockPath);
-  const resolvedDiscussions = useResolvedDiscussion(commentNodes, blockPath);
-
-  const suggestionsCount = resolvedSuggestions.length;
-  const discussionsCount = resolvedDiscussions.length;
-  const totalCount = suggestionsCount + discussionsCount;
-
-  const activeSuggestionId = usePluginOption(suggestionPlugin, "activeId");
-  const activeSuggestion =
-    activeSuggestionId && resolvedSuggestions.find((s) => s.suggestionId === activeSuggestionId);
-
-  const commentingBlock = usePluginOption(commentPlugin, "commentingBlock");
-  const activeCommentId = usePluginOption(commentPlugin, "activeId");
-  const isCommenting = activeCommentId === getDraftCommentKey();
-  const activeDiscussion =
-    activeCommentId && resolvedDiscussions.find((d) => d.id === activeCommentId);
-
-  const noneActive = !activeSuggestion && !activeDiscussion;
-
-  const sortedMergedData = [...resolvedDiscussions, ...resolvedSuggestions].sort(
-    (a, b) => a.createdAt.getTime() - b.createdAt.getTime(),
-  );
-
-  const selected =
-    resolvedDiscussions.some((d) => d.id === activeCommentId) ||
-    resolvedSuggestions.some((s) => s.suggestionId === activeSuggestionId);
-
-  const [_open, setOpen] = React.useState(selected);
-
-  // in some cases, we may comment the multiple blocks
-  const commentingCurrent = !!commentingBlock && PathApi.equals(blockPath, commentingBlock);
-
-  const open = _open || selected || (isCommenting && !!draftCommentNode && commentingCurrent);
-
-  const anchorElement = React.useMemo(() => {
-    let activeNode: NodeEntry | undefined;
-
-    if (activeSuggestion) {
-      activeNode = suggestionNodes.find(
-        ([node]) =>
-          TextApi.isText(node) &&
-          editor.getApi(SuggestionPlugin).suggestion.nodeId(node) === activeSuggestion.suggestionId,
-      );
-    }
-
-    if (activeCommentId) {
-      if (activeCommentId === getDraftCommentKey()) {
-        activeNode = draftCommentNode;
-      } else {
-        activeNode = commentNodes.find(
-          ([node]) => editor.getApi(commentPlugin).comment.nodeId(node) === activeCommentId,
-        );
-      }
-    }
-
-    if (!activeNode) return null;
-
-    return editor.api.toDOMNode(activeNode[0])!;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    open,
-    activeSuggestion,
-    activeCommentId,
-    editor.api,
-    suggestionNodes,
-    draftCommentNode,
-    commentNodes,
-  ]);
-
-  if (suggestionsCount + resolvedDiscussions.length === 0 && !draftCommentNode)
-    return <div className="w-full">{children}</div>;
-
-  return (
-    <div className="flex w-full justify-between">
-      <Popover
-        open={open}
-        onOpenChange={(_open_) => {
-          if (!_open_ && isCommenting && draftCommentNode) {
-            editor.tf.unsetNodes(getDraftCommentKey(), {
-              at: [],
-              mode: "lowest",
-              match: (n) => n[getDraftCommentKey()],
-            });
-          }
-          setOpen(_open_);
-        }}
-      >
-        <div className="w-full">{children}</div>
-        {anchorElement && (
-          <PopoverAnchor asChild className="w-full" virtualRef={{ current: anchorElement }} />
-        )}
-
-        <PopoverContent
-          className="max-h-[min(50dvh,calc(-24px+var(--radix-popper-available-height)))] w-[380px] min-w-[130px] max-w-[calc(100vw-24px)] overflow-y-auto p-0 data-[state=closed]:opacity-0"
-          onCloseAutoFocus={(e) => e.preventDefault()}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          align="center"
-          side="bottom"
-        >
-          {isCommenting ? (
-            <CommentCreateForm className="p-4" focusOnMount />
-          ) : noneActive ? (
-            sortedMergedData.map((item, index) =>
-              isResolvedSuggestion(item) ? (
-                <BlockSuggestionCard
-                  key={item.suggestionId}
-                  idx={index}
-                  isLast={index === sortedMergedData.length - 1}
-                  suggestion={item}
-                />
-              ) : (
-                <BlockComment
-                  key={item.id}
-                  discussion={item}
-                  isLast={index === sortedMergedData.length - 1}
-                />
-              ),
-            )
-          ) : (
-            <>
-              {activeSuggestion && (
-                <BlockSuggestionCard
-                  key={activeSuggestion.suggestionId}
-                  idx={0}
-                  isLast={true}
-                  suggestion={activeSuggestion}
-                />
-              )}
-
-              {activeDiscussion && <BlockComment discussion={activeDiscussion} isLast={true} />}
-            </>
-          )}
-        </PopoverContent>
-
-        {totalCount > 0 && (
-          <div className="relative left-0 size-0 select-none">
-            <PopoverTrigger asChild>
-              <Button
-                variant="ghost"
-                className="!px-1.5 mt-1 ml-1 flex h-6 gap-1 py-0 text-muted-foreground/80 hover:text-muted-foreground/80 data-[active=true]:bg-muted"
-                data-active={open}
-                contentEditable={false}
-              >
-                {suggestionsCount > 0 && discussionsCount === 0 && (
-                  <PencilLineIcon className="size-4 shrink-0" />
-                )}
-
-                {suggestionsCount === 0 && discussionsCount > 0 && (
-                  <MessageSquareTextIcon className="size-4 shrink-0" />
-                )}
-
-                {suggestionsCount > 0 && discussionsCount > 0 && (
-                  <MessagesSquareIcon className="size-4 shrink-0" />
-                )}
-
-                <span className="font-semibold text-xs">{totalCount}</span>
-              </Button>
-            </PopoverTrigger>
-          </div>
-        )}
-      </Popover>
-    </div>
-  );
-};
-
-function BlockComment({ discussion, isLast }: { discussion: TDiscussion; isLast: boolean }) {
-  const [editingId, setEditingId] = React.useState<string | null>(null);
-
-  return (
-    <React.Fragment key={discussion.id}>
-      <div className="p-4">
-        {discussion.comments.map((comment, index) => (
-          <Comment
-            key={comment.id ?? index}
-            comment={comment}
-            discussionLength={discussion.comments.length}
-            documentContent={discussion?.documentContent}
-            editingId={editingId}
-            index={index}
-            setEditingId={setEditingId}
-            showDocumentContent
-          />
-        ))}
-        <CommentCreateForm discussionId={discussion.id} />
-      </div>
-
-      {!isLast && <div className="h-px w-full bg-muted" />}
-    </React.Fragment>
-  );
-}
-
-const useResolvedDiscussion = (commentNodes: NodeEntry<TCommentText>[], blockPath: Path) => {
-  const { api, getOption, setOption } = useEditorPlugin(commentPlugin);
-
-  const discussions = usePluginOption(discussionPlugin, "discussions");
-
-  commentNodes.forEach(([node]) => {
-    const id = api.comment.nodeId(node);
-    const map = getOption("uniquePathMap");
-
-    if (!id) return;
-
-    const previousPath = map.get(id);
-
-    // If there are no comment nodes in the corresponding path in the map, then update it.
-    if (PathApi.isPath(previousPath)) {
-      const nodes = api.comment.node({ id, at: previousPath });
-
-      if (!nodes) {
-        setOption("uniquePathMap", new Map(map).set(id, blockPath));
-        return;
-      }
-
-      return;
-    }
-    // TODO: fix throw error
-    setOption("uniquePathMap", new Map(map).set(id, blockPath));
-  });
-
-  const commentsIds = new Set(
-    commentNodes.map(([node]) => api.comment.nodeId(node)).filter(Boolean),
-  );
-
-  const resolvedDiscussions = discussions
-    .map((d: TDiscussion) => ({
-      ...d,
-      createdAt: new Date(d.createdAt),
-    }))
-    .filter((item: TDiscussion) => {
-      /** If comment cross blocks just show it in the first block */
-      const commentsPathMap = getOption("uniquePathMap");
-      const firstBlockPath = commentsPathMap.get(item.id);
-
-      if (!firstBlockPath) return false;
-      if (!PathApi.equals(firstBlockPath, blockPath)) return false;
-
-      return api.comment.has({ id: item.id }) && commentsIds.has(item.id) && !item.isResolved;
-    });
-
-  return resolvedDiscussions;
-};