@fuma-content/studio 0.1.0

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

@@ -0,0 +1,438 @@
+"use client";
+
+import type { TResolvedSuggestion } from "@platejs/suggestion";
+import {
+  acceptSuggestion,
+  getSuggestionKey,
+  keyId2SuggestionId,
+  rejectSuggestion,
+} from "@platejs/suggestion";
+import { SuggestionPlugin } from "@platejs/suggestion/react";
+import { CheckIcon, XIcon } from "lucide-react";
+import {
+  ElementApi,
+  KEYS,
+  type NodeEntry,
+  type Path,
+  PathApi,
+  type TElement,
+  TextApi,
+  type TSuggestionText,
+} from "platejs";
+import { useEditorPlugin, usePluginOption } from "platejs/react";
+import * as React from "react";
+import { discussionPlugin, type TDiscussion } from "@/components/editor/plugins/discussion-kit";
+import { suggestionPlugin } from "@/components/editor/plugins/suggestion-kit";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+
+import { Comment, CommentCreateForm, formatCommentDate, type TComment } from "./comment";
+
+export interface ResolvedSuggestion extends TResolvedSuggestion {
+  comments: TComment[];
+}
+
+const BLOCK_SUGGESTION = "__block__";
+
+const TYPE_TEXT_MAP: Record<string, (node?: TElement) => string> = {
+  [KEYS.audio]: () => "Audio",
+  [KEYS.blockquote]: () => "Blockquote",
+  [KEYS.callout]: () => "Callout",
+  [KEYS.codeBlock]: () => "Code Block",
+  [KEYS.column]: () => "Column",
+  [KEYS.equation]: () => "Equation",
+  [KEYS.file]: () => "File",
+  [KEYS.h1]: () => "Heading 1",
+  [KEYS.h2]: () => "Heading 2",
+  [KEYS.h3]: () => "Heading 3",
+  [KEYS.h4]: () => "Heading 4",
+  [KEYS.h5]: () => "Heading 5",
+  [KEYS.h6]: () => "Heading 6",
+  [KEYS.hr]: () => "Horizontal Rule",
+  [KEYS.img]: () => "Image",
+  [KEYS.mediaEmbed]: () => "Media",
+  [KEYS.p]: (node) => {
+    if (node?.[KEYS.listType] === KEYS.listTodo) return "Todo List";
+    if (node?.[KEYS.listType] === KEYS.ol) return "Ordered List";
+    if (node?.[KEYS.listType] === KEYS.ul) return "List";
+
+    return "Paragraph";
+  },
+  [KEYS.table]: () => "Table",
+  [KEYS.toc]: () => "Table of Contents",
+  [KEYS.toggle]: () => "Toggle",
+  [KEYS.video]: () => "Video",
+};
+
+export function BlockSuggestionCard({
+  idx,
+  isLast,
+  suggestion,
+}: {
+  idx: number;
+  isLast: boolean;
+  suggestion: ResolvedSuggestion;
+}) {
+  const { api, editor } = useEditorPlugin(SuggestionPlugin);
+
+  const userInfo = usePluginOption(discussionPlugin, "user", suggestion.userId);
+
+  const accept = (suggestion: ResolvedSuggestion) => {
+    api.suggestion.withoutSuggestions(() => {
+      acceptSuggestion(editor, suggestion);
+    });
+  };
+
+  const reject = (suggestion: ResolvedSuggestion) => {
+    api.suggestion.withoutSuggestions(() => {
+      rejectSuggestion(editor, suggestion);
+    });
+  };
+
+  const [hovering, setHovering] = React.useState(false);
+
+  const suggestionText2Array = (text: string) => {
+    if (text === BLOCK_SUGGESTION) return ["line breaks"];
+
+    return text.split(BLOCK_SUGGESTION).filter(Boolean);
+  };
+
+  const [editingId, setEditingId] = React.useState<string | null>(null);
+
+  return (
+    <div
+      key={`${suggestion.suggestionId}-${idx}`}
+      className="relative"
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+    >
+      <div className="flex flex-col p-4">
+        <div className="relative flex items-center">
+          {/* 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>
+          <h4 className="mx-2 font-semibold text-sm leading-none">{userInfo?.name}</h4>
+          <div className="text-muted-foreground/80 text-xs leading-none">
+            <span className="mr-1">{formatCommentDate(new Date(suggestion.createdAt))}</span>
+          </div>
+        </div>
+
+        <div className="relative mt-1 mb-4 pl-[32px]">
+          <div className="flex flex-col gap-2">
+            {suggestion.type === "remove" &&
+              suggestionText2Array(suggestion.text!).map((text, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <span className="text-muted-foreground text-sm">Delete:</span>
+
+                  <span key={index} className="text-sm">
+                    {text}
+                  </span>
+                </div>
+              ))}
+
+            {suggestion.type === "insert" &&
+              suggestionText2Array(suggestion.newText!).map((text, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <span className="text-muted-foreground text-sm">Add:</span>
+
+                  <span key={index} className="text-sm">
+                    {text || "line breaks"}
+                  </span>
+                </div>
+              ))}
+
+            {suggestion.type === "replace" && (
+              <div className="flex flex-col gap-2">
+                {suggestionText2Array(suggestion.newText!).map((text, index) => (
+                  <React.Fragment key={index}>
+                    <div key={index} className="flex items-start gap-2 text-brand/80">
+                      <span className="text-sm">with:</span>
+                      <span className="text-sm">{text || "line breaks"}</span>
+                    </div>
+                  </React.Fragment>
+                ))}
+
+                {suggestionText2Array(suggestion.text!).map((text, index) => (
+                  <React.Fragment key={index}>
+                    <div key={index} className="flex items-start gap-2">
+                      <span className="text-muted-foreground text-sm">
+                        {index === 0 ? "Replace:" : "Delete:"}
+                      </span>
+                      <span className="text-sm">{text || "line breaks"}</span>
+                    </div>
+                  </React.Fragment>
+                ))}
+              </div>
+            )}
+
+            {suggestion.type === "update" && (
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground text-sm">
+                  {Object.keys(suggestion.properties).map((key) => (
+                    <span key={key}>Un{key}</span>
+                  ))}
+
+                  {Object.keys(suggestion.newProperties).map((key) => (
+                    <span key={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</span>
+                  ))}
+                </span>
+                <span className="text-sm">{suggestion.newText}</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {suggestion.comments.map((comment, index) => (
+          <Comment
+            key={comment.id ?? index}
+            comment={comment}
+            discussionLength={suggestion.comments.length}
+            documentContent="__suggestion__"
+            editingId={editingId}
+            index={index}
+            setEditingId={setEditingId}
+          />
+        ))}
+
+        {hovering && (
+          <div className="absolute top-4 right-4 flex gap-2">
+            <Button
+              variant="ghost"
+              className="size-6 p-1 text-muted-foreground"
+              onClick={() => accept(suggestion)}
+            >
+              <CheckIcon className="size-4" />
+            </Button>
+
+            <Button
+              variant="ghost"
+              className="size-6 p-1 text-muted-foreground"
+              onClick={() => reject(suggestion)}
+            >
+              <XIcon className="size-4" />
+            </Button>
+          </div>
+        )}
+
+        <CommentCreateForm discussionId={suggestion.suggestionId} />
+      </div>
+
+      {!isLast && <div className="h-px w-full bg-muted" />}
+    </div>
+  );
+}
+
+export const useResolveSuggestion = (
+  suggestionNodes: NodeEntry<TElement | TSuggestionText>[],
+  blockPath: Path,
+) => {
+  const discussions = usePluginOption(discussionPlugin, "discussions");
+
+  const { api, editor, getOption, setOption } = useEditorPlugin(suggestionPlugin);
+
+  suggestionNodes.forEach(([node]) => {
+    const id = api.suggestion.nodeId(node);
+    const map = getOption("uniquePathMap");
+
+    if (!id) return;
+
+    const previousPath = map.get(id);
+
+    // If there are no suggestion nodes in the corresponding path in the map, then update it.
+    if (PathApi.isPath(previousPath)) {
+      const nodes = api.suggestion.node({ id, at: previousPath, isText: true });
+      const parentNode = api.node(previousPath);
+      let lineBreakId: string | null = null;
+
+      if (parentNode && ElementApi.isElement(parentNode[0])) {
+        lineBreakId = api.suggestion.nodeId(parentNode[0]) ?? null;
+      }
+
+      if (!nodes && lineBreakId !== id) {
+        setOption("uniquePathMap", new Map(map).set(id, blockPath));
+      }
+    } else {
+      setOption("uniquePathMap", new Map(map).set(id, blockPath));
+    }
+  });
+
+  const resolvedSuggestion: ResolvedSuggestion[] = React.useMemo(() => {
+    const map = getOption("uniquePathMap");
+
+    if (suggestionNodes.length === 0) return [];
+
+    const suggestionIds = new Set(
+      suggestionNodes
+        .flatMap(([node]) => {
+          if (TextApi.isText(node)) {
+            const dataList = api.suggestion.dataList(node);
+            const includeUpdate = dataList.some((data) => data.type === "update");
+
+            if (!includeUpdate) {
+              return api.suggestion.nodeId(node) ?? [];
+            }
+
+            return dataList.filter((data) => data.type === "update").map((d) => d.id);
+          }
+          if (ElementApi.isElement(node)) {
+            return api.suggestion.nodeId(node) ?? [];
+          }
+
+          return [];
+        })
+        .filter(Boolean),
+    );
+
+    const res: ResolvedSuggestion[] = [];
+
+    suggestionIds.forEach((id) => {
+      if (!id) return;
+
+      const path = map.get(id);
+
+      if (!path || !PathApi.isPath(path)) return;
+      if (!PathApi.equals(path, blockPath)) return;
+
+      const entries = [
+        ...editor.api.nodes<TElement | TSuggestionText>({
+          at: [],
+          mode: "all",
+          match: (n) =>
+            (n[KEYS.suggestion] && n[getSuggestionKey(id)]) ||
+            api.suggestion.nodeId(n as TElement) === id,
+        }),
+      ];
+
+      // move line break to the end
+      entries.sort(([, path1], [, path2]) => (PathApi.isChild(path1, path2) ? -1 : 1));
+
+      let newText = "";
+      let text = "";
+      let properties: any = {};
+      let newProperties: any = {};
+
+      // overlapping suggestion
+      entries.forEach(([node]) => {
+        if (TextApi.isText(node)) {
+          const dataList = api.suggestion.dataList(node);
+
+          dataList.forEach((data) => {
+            if (data.id === id) {
+              switch (data.type) {
+                case "insert": {
+                  newText += node.text;
+
+                  break;
+                }
+                case "remove": {
+                  text += node.text;
+
+                  break;
+                }
+                case "update": {
+                  properties = {
+                    ...properties,
+                    ...data.properties,
+                  };
+
+                  newProperties = {
+                    ...newProperties,
+                    ...data.newProperties,
+                  };
+
+                  newText += node.text;
+
+                  break;
+                }
+                // No default
+              }
+            }
+          });
+        } else {
+          const lineBreakData = api.suggestion.isBlockSuggestion(node)
+            ? node.suggestion
+            : undefined;
+
+          if (lineBreakData?.id === keyId2SuggestionId(id)) {
+            if (lineBreakData.type === "insert") {
+              newText += lineBreakData.isLineBreak
+                ? BLOCK_SUGGESTION
+                : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
+            } else if (lineBreakData.type === "remove") {
+              text += lineBreakData.isLineBreak
+                ? BLOCK_SUGGESTION
+                : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
+            }
+          }
+        }
+      });
+
+      if (entries.length === 0) return;
+
+      const nodeData = api.suggestion.suggestionData(entries[0][0]);
+
+      if (!nodeData) return;
+
+      // const comments = data?.discussions.find((d) => d.id === id)?.comments;
+      const comments = discussions.find((s: TDiscussion) => s.id === id)?.comments || [];
+      const createdAt = new Date(nodeData.createdAt);
+
+      const keyId = getSuggestionKey(id);
+
+      if (nodeData.type === "update") {
+        res.push({
+          comments,
+          createdAt,
+          keyId,
+          newProperties,
+          newText,
+          properties,
+          suggestionId: keyId2SuggestionId(id),
+          type: "update",
+          userId: nodeData.userId,
+        });
+      } else if (newText.length > 0 && text.length > 0) {
+        res.push({
+          comments,
+          createdAt,
+          keyId,
+          newText,
+          suggestionId: keyId2SuggestionId(id),
+          text,
+          type: "replace",
+          userId: nodeData.userId,
+        });
+      } else if (newText.length > 0) {
+        res.push({
+          comments,
+          createdAt,
+          keyId,
+          newText,
+          suggestionId: keyId2SuggestionId(id),
+          type: "insert",
+          userId: nodeData.userId,
+        });
+      } else if (text.length > 0) {
+        res.push({
+          comments,
+          createdAt,
+          keyId,
+          suggestionId: keyId2SuggestionId(id),
+          text,
+          type: "remove",
+          userId: nodeData.userId,
+        });
+      }
+    });
+
+    return res;
+  }, [api.suggestion, blockPath, discussions, editor.api, getOption, suggestionNodes]);
+
+  return resolvedSuggestion;
+};
+
+export const isResolvedSuggestion = (
+  suggestion: ResolvedSuggestion | TDiscussion,
+): suggestion is ResolvedSuggestion => "suggestionId" in suggestion;

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

@@ -0,0 +1,5 @@
+import { type SlateElementProps, SlateElement } from "platejs/static";
+
+export function BlockquoteElementStatic(props: SlateElementProps) {
+  return <SlateElement as="blockquote" className="my-1 border-l-2 pl-6 italic" {...props} />;
+}

package/src/components/editor/ui/blockquote-node.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { type PlateElementProps, PlateElement } from "platejs/react";
+
+export function BlockquoteElement(props: PlateElementProps) {
+  return <PlateElement as="blockquote" className="my-1 border-l-2 pl-6 italic" {...props} />;
+}

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

@@ -0,0 +1,30 @@
+import type { SlateElementProps } from "platejs/static";
+
+import { SlateElement } from "platejs/static";
+
+import { cn } from "@/lib/utils";
+
+export function CalloutElementStatic({ children, className, ...props }: SlateElementProps) {
+  return (
+    <SlateElement
+      className={cn("my-1 flex rounded-sm bg-muted p-4 pl-3", className)}
+      style={{
+        backgroundColor: props.element.backgroundColor as any,
+      }}
+      {...props}
+    >
+      <div className="flex w-full gap-2 rounded-md">
+        <div
+          className="size-6 select-none text-[18px]"
+          style={{
+            fontFamily:
+              '"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols',
+          }}
+        >
+          <span data-plate-prevent-deserialization>{(props.element.icon as any) || "💡"}</span>
+        </div>
+        <div className="w-full">{children}</div>
+      </div>
+    </SlateElement>
+  );
+}

package/src/components/editor/ui/callout-node.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import type * as React from "react";
+
+import { useCalloutEmojiPicker } from "@platejs/callout/react";
+import { useEmojiDropdownMenuState } from "@platejs/emoji/react";
+import { PlateElement } from "platejs/react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+import { EmojiPicker, EmojiPopover } from "./emoji-toolbar-button";
+
+export function CalloutElement({
+  attributes,
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof PlateElement>) {
+  const { emojiPickerState, isOpen, setIsOpen } = useEmojiDropdownMenuState({
+    closeOnSelect: true,
+  });
+
+  const { emojiToolbarDropdownProps, props: calloutProps } = useCalloutEmojiPicker({
+    isOpen,
+    setIsOpen,
+  });
+
+  return (
+    <PlateElement
+      className={cn("my-1 flex rounded-sm bg-muted p-4 pl-3", className)}
+      style={{
+        backgroundColor: props.element.backgroundColor as any,
+      }}
+      attributes={{
+        ...attributes,
+        "data-plate-open-context-menu": true,
+      }}
+      {...props}
+    >
+      <div className="flex w-full gap-2 rounded-md">
+        <EmojiPopover
+          {...emojiToolbarDropdownProps}
+          control={
+            <Button
+              variant="ghost"
+              className="size-6 select-none p-1 text-[18px] hover:bg-muted-foreground/15"
+              style={{
+                fontFamily:
+                  '"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols',
+              }}
+              contentEditable={false}
+            >
+              {(props.element.icon as any) || "💡"}
+            </Button>
+          }
+        >
+          <EmojiPicker {...emojiPickerState} {...calloutProps} />
+        </EmojiPopover>
+        <div className="w-full">{children}</div>
+      </div>
+    </PlateElement>
+  );
+}

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

@@ -0,0 +1,55 @@
+"use client";
+
+import type * as React from "react";
+
+import type { VariantProps } from "class-variance-authority";
+
+import {
+  Caption as CaptionPrimitive,
+  CaptionTextarea as CaptionTextareaPrimitive,
+  useCaptionButton,
+  useCaptionButtonState,
+} from "@platejs/caption/react";
+import { cva } from "class-variance-authority";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const captionVariants = cva("max-w-full", {
+  defaultVariants: {
+    align: "center",
+  },
+  variants: {
+    align: {
+      center: "mx-auto",
+      left: "mr-auto",
+      right: "ml-auto",
+    },
+  },
+});
+
+export function Caption({
+  align,
+  className,
+  ...props
+}: React.ComponentProps<typeof CaptionPrimitive> & VariantProps<typeof captionVariants>) {
+  return <CaptionPrimitive {...props} className={cn(captionVariants({ align }), className)} />;
+}
+
+export function CaptionTextarea(props: React.ComponentProps<typeof CaptionTextareaPrimitive>) {
+  return (
+    <CaptionTextareaPrimitive
+      {...props}
+      className={cn(
+        "mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit",
+        "focus:outline-none focus:placeholder:opacity-0",
+        "text-center print:placeholder:text-transparent",
+        props.className,
+      )}
+    />
+  );
+}
+
+export function CaptionButton(props: React.ComponentProps<typeof Button>) {
+  const state = useCaptionButtonState();
+  return <Button {...props} {...useCaptionButton(state)} />;
+}

package/src/components/editor/ui/code-block-node-static.tsx

@@ -0,0 +1,33 @@
+import type { TCodeBlockElement } from "platejs";
+
+import {
+  type SlateElementProps,
+  type SlateLeafProps,
+  SlateElement,
+  SlateLeaf,
+} from "platejs/static";
+
+export function CodeBlockElementStatic(props: SlateElementProps<TCodeBlockElement>) {
+  return (
+    <SlateElement
+      className="py-1 **:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a] dark:**:[.hljs-addition]:bg-[#3c5743] dark:**:[.hljs-addition]:text-[#ceead5] **:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5] dark:**:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#6596cf] **:[.hljs-built\\\\_in,.hljs-symbol]:text-[#e36209] dark:**:[.hljs-built\\\\_in,.hljs-symbol]:text-[#c3854e] **:[.hljs-bullet]:text-[#735c0f] **:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] dark:**:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] **:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28] dark:**:[.hljs-deletion]:bg-[#473235] dark:**:[.hljs-deletion]:text-[#e7c7cb] **:[.hljs-emphasis]:italic **:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#d73a49] dark:**:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\_]:text-[#ee6960] **:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a] dark:**:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#36a84f] **:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62] dark:**:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#3593ff] **:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5] dark:**:[.hljs-section]:text-[#61a5f2] **:[.hljs-strong]:font-bold **:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#6f42c1] dark:**:[.hljs-title,.hljs-title.class\\\\_,.hljs-title.class\\\\_.inherited\\\\_\\\\_,.hljs-title.function\\\\_]:text-[#a77bfa]"
+      {...props}
+    >
+      <div className="relative rounded-md bg-muted/50">
+        <pre className="overflow-x-auto p-8 pr-4 font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid">
+          <code>{props.children}</code>
+        </pre>
+      </div>
+    </SlateElement>
+  );
+}
+
+export function CodeLineElementStatic(props: SlateElementProps) {
+  return <SlateElement {...props} />;
+}
+
+export function CodeSyntaxLeafStatic(props: SlateLeafProps) {
+  const tokenClassName = props.leaf.className as string;
+
+  return <SlateLeaf className={tokenClassName} {...props} />;
+}