@fuma-content/studio 1.0.0 → 1.0.2

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

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

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

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

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

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

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

@@ -1,33 +0,0 @@
-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} />;
-}