@fuma-content/studio 0.1.0

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

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

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

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

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

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