@fuma-content/studio 0.1.0

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

@@ -0,0 +1,23 @@
+"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

@@ -0,0 +1,78 @@
+"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

@@ -0,0 +1,154 @@
+"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

@@ -0,0 +1,318 @@
+"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;
+};