@fuma-content/studio 1.0.0 → 1.0.2

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

@@ -1,260 +0,0 @@
-"use client";
-
-import { TablePlugin, useTableMergeState } from "@platejs/table/react";
-
-import {
-  ArrowDown,
-  ArrowLeft,
-  ArrowRight,
-  ArrowUp,
-  Combine,
-  Grid3x3Icon,
-  Table,
-  Trash2Icon,
-  Ungroup,
-  XIcon,
-} from "lucide-react";
-import { KEYS } from "platejs";
-import { useEditorPlugin, useEditorSelector } from "platejs/react";
-import * as React from "react";
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { cn } from "@/lib/utils";
-
-import { ToolbarButton } from "../../ui/toolbar";
-
-export function TableToolbarButton(props: React.ComponentProps<typeof DropdownMenu>) {
-  const tableSelected = useEditorSelector(
-    (editor) => editor.api.some({ match: { type: KEYS.table } }),
-    [],
-  );
-
-  const { editor, tf } = useEditorPlugin(TablePlugin);
-  const [open, setOpen] = React.useState(false);
-  const mergeState = useTableMergeState();
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip="Table" isDropdown>
-          <Table />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="flex w-[180px] min-w-0 flex-col" align="start">
-        <DropdownMenuGroup>
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
-              <Grid3x3Icon className="size-4" />
-              <span>Table</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent className="m-0 p-0">
-              <TablePicker />
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
-
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger
-              className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-              disabled={!tableSelected}
-            >
-              <div className="size-4" />
-              <span>Cell</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent>
-              <DropdownMenuItem
-                className="min-w-[180px]"
-                disabled={!mergeState.canMerge}
-                onSelect={() => {
-                  tf.table.merge();
-                  editor.tf.focus();
-                }}
-              >
-                <Combine />
-                Merge cells
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="min-w-[180px]"
-                disabled={!mergeState.canSplit}
-                onSelect={() => {
-                  tf.table.split();
-                  editor.tf.focus();
-                }}
-              >
-                <Ungroup />
-                Split cell
-              </DropdownMenuItem>
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
-
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger
-              className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-              disabled={!tableSelected}
-            >
-              <div className="size-4" />
-              <span>Row</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent>
-              <DropdownMenuItem
-                className="min-w-[180px]"
-                disabled={!tableSelected}
-                onSelect={() => {
-                  tf.insert.tableRow({ before: true });
-                  editor.tf.focus();
-                }}
-              >
-                <ArrowUp />
-                Insert row before
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="min-w-[180px]"
-                disabled={!tableSelected}
-                onSelect={() => {
-                  tf.insert.tableRow();
-                  editor.tf.focus();
-                }}
-              >
-                <ArrowDown />
-                Insert row after
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="min-w-[180px]"
-                disabled={!tableSelected}
-                onSelect={() => {
-                  tf.remove.tableRow();
-                  editor.tf.focus();
-                }}
-              >
-                <XIcon />
-                Delete row
-              </DropdownMenuItem>
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
-
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger
-              className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-              disabled={!tableSelected}
-            >
-              <div className="size-4" />
-              <span>Column</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent>
-              <DropdownMenuItem
-                className="min-w-[180px]"
-                disabled={!tableSelected}
-                onSelect={() => {
-                  tf.insert.tableColumn({ before: true });
-                  editor.tf.focus();
-                }}
-              >
-                <ArrowLeft />
-                Insert column before
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="min-w-[180px]"
-                disabled={!tableSelected}
-                onSelect={() => {
-                  tf.insert.tableColumn();
-                  editor.tf.focus();
-                }}
-              >
-                <ArrowRight />
-                Insert column after
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                className="min-w-[180px]"
-                disabled={!tableSelected}
-                onSelect={() => {
-                  tf.remove.tableColumn();
-                  editor.tf.focus();
-                }}
-              >
-                <XIcon />
-                Delete column
-              </DropdownMenuItem>
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
-
-          <DropdownMenuItem
-            className="min-w-[180px]"
-            disabled={!tableSelected}
-            onSelect={() => {
-              tf.remove.table();
-              editor.tf.focus();
-            }}
-          >
-            <Trash2Icon />
-            Delete table
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-function TablePicker() {
-  const { editor, tf } = useEditorPlugin(TablePlugin);
-
-  const [tablePicker, setTablePicker] = React.useState({
-    grid: Array.from({ length: 8 }, () => Array.from({ length: 8 }).fill(0)),
-    size: { colCount: 0, rowCount: 0 },
-  });
-
-  const onCellMove = (rowIndex: number, colIndex: number) => {
-    const newGrid = [...tablePicker.grid];
-
-    for (let i = 0; i < newGrid.length; i++) {
-      for (let j = 0; j < newGrid[i].length; j++) {
-        newGrid[i][j] = i >= 0 && i <= rowIndex && j >= 0 && j <= colIndex ? 1 : 0;
-      }
-    }
-
-    setTablePicker({
-      grid: newGrid,
-      size: { colCount: colIndex + 1, rowCount: rowIndex + 1 },
-    });
-  };
-
-  return (
-    <div
-      className="flex! m-0 flex-col p-0"
-      onClick={() => {
-        tf.insert.table(tablePicker.size, { select: true });
-        editor.tf.focus();
-      }}
-      role="button"
-    >
-      <div className="grid size-[130px] grid-cols-8 gap-0.5 p-1">
-        {tablePicker.grid.map((rows, rowIndex) =>
-          rows.map((value, columIndex) => (
-            <div
-              key={`(${rowIndex},${columIndex})`}
-              className={cn(
-                "col-span-1 size-3 border border-solid bg-secondary",
-                !!value && "border-current",
-              )}
-              onMouseMove={() => {
-                onCellMove(rowIndex, columIndex);
-              }}
-            />
-          )),
-        )}
-      </div>
-
-      <div className="text-center text-current text-xs">
-        {tablePicker.size.rowCount} x {tablePicker.size.colCount}
-      </div>
-    </div>
-  );
-}

package/src/components/editor/ui/turn-into-toolbar-button.tsx

@@ -1,176 +0,0 @@
-"use client";
-
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  Columns3Icon,
-  FileCodeIcon,
-  Heading1Icon,
-  Heading2Icon,
-  Heading3Icon,
-  Heading4Icon,
-  Heading5Icon,
-  Heading6Icon,
-  ListIcon,
-  ListOrderedIcon,
-  PilcrowIcon,
-  QuoteIcon,
-  SquareIcon,
-} from "lucide-react";
-import type { TElement } from "platejs";
-import { KEYS } from "platejs";
-import { useEditorRef, useSelectionFragmentProp } from "platejs/react";
-import type { ComponentProps } from "react";
-import * as React from "react";
-import { getBlockType, setBlockType } from "@/components/editor/transforms";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { ToolbarButton, ToolbarMenuGroup } from "../../ui/toolbar";
-
-export const turnIntoItems = [
-  {
-    icon: <PilcrowIcon />,
-    keywords: ["paragraph"],
-    label: "Text",
-    value: KEYS.p,
-  },
-  {
-    icon: <Heading1Icon />,
-    keywords: ["title", "h1"],
-    label: "Heading 1",
-    value: "h1",
-  },
-  {
-    icon: <Heading2Icon />,
-    keywords: ["subtitle", "h2"],
-    label: "Heading 2",
-    value: "h2",
-  },
-  {
-    icon: <Heading3Icon />,
-    keywords: ["subtitle", "h3"],
-    label: "Heading 3",
-    value: "h3",
-  },
-  {
-    icon: <Heading4Icon />,
-    keywords: ["subtitle", "h4"],
-    label: "Heading 4",
-    value: "h4",
-  },
-  {
-    icon: <Heading5Icon />,
-    keywords: ["subtitle", "h5"],
-    label: "Heading 5",
-    value: "h5",
-  },
-  {
-    icon: <Heading6Icon />,
-    keywords: ["subtitle", "h6"],
-    label: "Heading 6",
-    value: "h6",
-  },
-  {
-    icon: <ListIcon />,
-    keywords: ["unordered", "ul", "-"],
-    label: "Bulleted list",
-    value: KEYS.ul,
-  },
-  {
-    icon: <ListOrderedIcon />,
-    keywords: ["ordered", "ol", "1"],
-    label: "Numbered list",
-    value: KEYS.ol,
-  },
-  {
-    icon: <SquareIcon />,
-    keywords: ["checklist", "task", "checkbox", "[]"],
-    label: "To-do list",
-    value: KEYS.listTodo,
-  },
-  {
-    icon: <ChevronRightIcon />,
-    keywords: ["collapsible", "expandable"],
-    label: "Toggle list",
-    value: KEYS.toggle,
-  },
-  {
-    icon: <FileCodeIcon />,
-    keywords: ["```"],
-    label: "Code",
-    value: KEYS.codeBlock,
-  },
-  {
-    icon: <QuoteIcon />,
-    keywords: ["citation", "blockquote", ">"],
-    label: "Quote",
-    value: KEYS.blockquote,
-  },
-  {
-    icon: <Columns3Icon />,
-    label: "3 columns",
-    value: "action_three_columns",
-  },
-];
-
-export function TurnIntoToolbarButton(props: ComponentProps<typeof DropdownMenu>) {
-  const editor = useEditorRef();
-  const [open, setOpen] = React.useState(false);
-
-  const value = useSelectionFragmentProp({
-    defaultValue: KEYS.p,
-    getProp: (node) => getBlockType(node as TElement),
-  });
-  const selectedItem = React.useMemo(
-    () => turnIntoItems.find((item) => item.value === (value ?? KEYS.p)) ?? turnIntoItems[0],
-    [value],
-  );
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton className="min-w-[125px]" pressed={open} tooltip="Turn into" isDropdown>
-          {selectedItem.label}
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent
-        className="ignore-click-outside/toolbar min-w-[180px]"
-        onCloseAutoFocus={(e) => {
-          e.preventDefault();
-          editor.tf.focus();
-        }}
-        align="start"
-      >
-        <ToolbarMenuGroup
-          value={value}
-          onValueChange={(type) => {
-            setBlockType(editor, type);
-          }}
-          label="Turn into"
-        >
-          {turnIntoItems.map(({ icon, label, value: itemValue }) => (
-            <DropdownMenuRadioItem
-              key={itemValue}
-              className="pl-2 *:first:[span]:hidden"
-              value={itemValue}
-            >
-              <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
-                <DropdownMenuItemIndicator>
-                  <CheckIcon />
-                </DropdownMenuItemIndicator>
-              </span>
-              {icon}
-              {label}
-            </DropdownMenuRadioItem>
-          ))}
-        </ToolbarMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/components/editor/use-chat.ts

@@ -1,120 +0,0 @@
-"use client";
-
-import { type UseChatHelpers, useChat as useBaseChat } from "@ai-sdk/react";
-import { AIChatPlugin, aiCommentToRange } from "@platejs/ai/react";
-import { getCommentKey, getTransientCommentKey } from "@platejs/comment";
-import { deserializeMd } from "@platejs/markdown";
-import { BlockSelectionPlugin } from "@platejs/selection/react";
-import { DefaultChatTransport, type UIMessage } from "ai";
-import { KEYS, NodeApi, nanoid, TextApi, type TNode } from "platejs";
-import { useEditorRef, usePluginOption } from "platejs/react";
-import * as React from "react";
-
-import { aiChatPlugin } from "@/components/editor/plugins/ai-kit";
-
-import { discussionPlugin } from "./plugins/discussion-kit";
-
-export type ToolName = "comment" | "edit" | "generate";
-
-export type TComment = {
-  comment: {
-    blockId: string;
-    comment: string;
-    content: string;
-  } | null;
-  status: "finished" | "streaming";
-};
-
-export type MessageDataPart = {
-  toolName: ToolName;
-  comment?: TComment;
-};
-
-export type Chat = UseChatHelpers<ChatMessage>;
-
-export type ChatMessage = UIMessage<unknown, MessageDataPart>;
-
-export const useChat = () => {
-  const editor = useEditorRef();
-  const options = usePluginOption(aiChatPlugin, "chatOptions");
-
-  const chat = useBaseChat<ChatMessage>({
-    id: "editor",
-    transport: new DefaultChatTransport({
-      api: options.api || "/api/ai/command",
-    }),
-    onData(data) {
-      if (data.type === "data-toolName") {
-        editor.setOption(AIChatPlugin, "toolName", data.data);
-      }
-
-      if (data.type === "data-comment" && data.data) {
-        if (data.data.status === "finished") {
-          editor.getApi(BlockSelectionPlugin).blockSelection.deselect();
-
-          return;
-        }
-
-        const aiComment = data.data.comment!;
-        const range = aiCommentToRange(editor, aiComment);
-
-        if (!range) return console.warn("No range found for AI comment");
-
-        const discussions = editor.getOption(discussionPlugin, "discussions") || [];
-
-        // Generate a new discussion ID
-        const discussionId = nanoid();
-
-        // Create a new comment
-        const newComment = {
-          id: nanoid(),
-          contentRich: [{ children: [{ text: aiComment.comment }], type: "p" }],
-          createdAt: new Date(),
-          discussionId,
-          isEdited: false,
-          userId: editor.getOption(discussionPlugin, "currentUserId"),
-        };
-
-        // Create a new discussion
-        const newDiscussion = {
-          id: discussionId,
-          comments: [newComment],
-          createdAt: new Date(),
-          documentContent: deserializeMd(editor, aiComment.content)
-            .map((node: TNode) => NodeApi.string(node))
-            .join("\n"),
-          isResolved: false,
-          userId: editor.getOption(discussionPlugin, "currentUserId"),
-        };
-
-        // Update discussions
-        const updatedDiscussions = [...discussions, newDiscussion];
-        editor.setOption(discussionPlugin, "discussions", updatedDiscussions);
-
-        // Apply comment marks to the editor
-        editor.tf.withMerging(() => {
-          editor.tf.setNodes(
-            {
-              [getCommentKey(newDiscussion.id)]: true,
-              [getTransientCommentKey()]: true,
-              [KEYS.comment]: true,
-            },
-            {
-              at: range,
-              match: TextApi.isText,
-              split: true,
-            },
-          );
-        });
-      }
-    },
-
-    ...options,
-  });
-
-  React.useEffect(() => {
-    editor.setOption(AIChatPlugin, "chat", chat as any);
-  }, [chat.status, chat.messages, chat.error]);
-
-  return chat;
-};

package/src/components/icons/logo.tsx

@@ -1,37 +0,0 @@
-import type { ComponentProps } from "react";
-
-export function Logo(props: ComponentProps<"svg">) {
-  return (
-    <svg viewBox="0 0 360 360" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <circle cx="180.5" cy="180.5" r="141.5" fill="url(#paint0_linear_604_85)" />
-      <path
-        d="M347.698 136.733C51.6985 -131.267 276.064 296.733 187.699 296.733C99.333 296.733 111.199 129.366 111.199 41C98.1985 121.5 -48.1663 319.5 40.1992 319.5C150.699 319.5 134.699 21 347.698 136.733Z"
-        fill="url(#paint1_radial_604_85)"
-      />
-      <defs>
-        <linearGradient
-          id="paint0_linear_604_85"
-          x1="180.5"
-          y1="39"
-          x2="180.5"
-          y2="322"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#A79EFF" />
-          <stop offset="1" stopColor="#4434DA" />
-        </linearGradient>
-        <radialGradient
-          id="paint1_radial_604_85"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(27.6988 -8.15656) rotate(45.4948) scale(363.938 363.938)"
-        >
-          <stop offset="0.513102" stopColor="white" />
-          <stop offset="1" stopColor="#6AFFED" />
-        </radialGradient>
-      </defs>
-    </svg>
-  );
-}

package/src/components/json-schema-editor/client.tsx

@@ -1,55 +0,0 @@
-"use client";
-import { type ReactNode, useEffect, useRef } from "react";
-import { FieldSet } from "./components/inputs";
-import { SchemaProvider, EditorContextType, useResolvedSchema, useSchema } from "./schema";
-import { FormProvider, useForm } from "react-hook-form";
-
-interface FormValues {
-  value: unknown;
-}
-
-export interface JSONSchemaProviderProps extends EditorContextType {
-  children: ReactNode;
-  defaultValue: unknown;
-  onValueChange: (value: unknown) => void;
-}
-
-export function JSONSchemaEditorProvider({
-  children,
-  defaultValue,
-  onValueChange,
-  ...props
-}: JSONSchemaProviderProps) {
-  const form = useForm<FormValues>({
-    defaultValues: { value: defaultValue },
-  });
-  const onValueChangeRef = useRef(onValueChange);
-  onValueChangeRef.current = onValueChange;
-
-  useEffect(() => {
-    return form.subscribe({
-      formState: {
-        values: true,
-      },
-      callback(data) {
-        onValueChangeRef.current(data.values.value);
-      },
-    });
-  }, []);
-
-  return (
-    <FormProvider {...form}>
-      <SchemaProvider {...props}>{children}</SchemaProvider>
-    </FormProvider>
-  );
-}
-
-export function JSONSchemaEditorContent() {
-  const { schema } = useSchema();
-  const field = useResolvedSchema(schema);
-  const fieldName = "value";
-
-  if (field.format === "binary") return <FieldSet field={field} fieldName={fieldName} />;
-
-  return <FieldSet field={field} fieldName={fieldName} collapsible={false} />;
-}