@fuma-content/studio 0.1.0

package/src/components/collection/context.tsx

@@ -0,0 +1,24 @@
+"use client";
+import type { ClientContext } from "lib";
+import { createContext, ReactNode, use, useMemo } from "react";
+
+const ClientContext = createContext<Map<string, ClientContext> | null>(null);
+
+export function ClientContextProvider({
+  contexts,
+  children,
+}: {
+  contexts: Map<string, ClientContext>;
+  children: ReactNode;
+}) {
+  const cachedCtx = useMemo(() => contexts, []);
+
+  return <ClientContext value={cachedCtx}>{children}</ClientContext>;
+}
+
+/**
+ * you can assume the client context is immutable
+ */
+export function useClientContext(collectionId: string): ClientContext {
+  return use(ClientContext)?.get(collectionId) ?? {};
+}

package/src/components/collection/document/actions.tsx

@@ -0,0 +1,83 @@
+"use client";
+import { MoreHorizontalIcon, TrashIcon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { ReactElement } from "react";
+import { documentCollection, type DocumentItem } from "@/lib/data/store";
+import { usePathname, useRouter } from "next/navigation";
+import { isActive } from "@/lib/utils/urls";
+
+export function DocumentActionsDropdown({ document }: { document: DocumentItem }) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <DropdownMenu>
+      <Button variant="ghost" size="icon" className="text-muted-foreground ms-auto" asChild>
+        <DropdownMenuTrigger aria-label="More Actions">
+          <MoreHorizontalIcon />
+        </DropdownMenuTrigger>
+      </Button>
+      <DropdownMenuContent>
+        {document.permissions.delete && (
+          <DropdownMenuItem
+            variant="destructive"
+            onClick={() => {
+              documentCollection.delete(`${document.collectionId}-${document.id}`);
+              if (isActive(pathname, `/collection/${document.collectionId}/${document.id}`, true)) {
+                router.push(`/collection/${document.collectionId}`);
+              }
+            }}
+          >
+            <TrashIcon />
+            Delete Item
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function DocumentActionsContext({
+  document,
+  children,
+}: {
+  document: DocumentItem;
+  children: ReactElement;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger render={children} />
+      <ContextMenuContent>
+        {document.permissions.delete && (
+          <ContextMenuItem
+            variant="destructive"
+            onClick={() => {
+              documentCollection.delete(`${document.collectionId}-${document.id}`);
+              if (isActive(pathname, `/collection/${document.collectionId}/${document.id}`, true)) {
+                router.push(`/collection/${document.collectionId}`);
+              }
+            }}
+          >
+            <TrashIcon />
+            Delete Item
+          </ContextMenuItem>
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/components/editor/editor-base-kit.tsx

@@ -0,0 +1,37 @@
+import { BaseAlignKit } from "./plugins/align-base-kit";
+import { BaseBasicBlocksKit } from "./plugins/basic-blocks-base-kit";
+import { BaseBasicMarksKit } from "./plugins/basic-marks-base-kit";
+import { BaseCalloutKit } from "./plugins/callout-base-kit";
+import { BaseCodeBlockKit } from "./plugins/code-block-base-kit";
+import { BaseColumnKit } from "./plugins/column-base-kit";
+import { BaseCommentKit } from "./plugins/comment-base-kit";
+import { BaseDateKit } from "./plugins/date-base-kit";
+import { BaseFontKit } from "./plugins/font-base-kit";
+import { BaseLineHeightKit } from "./plugins/line-height-base-kit";
+import { BaseLinkKit } from "./plugins/link-base-kit";
+import { BaseListKit } from "./plugins/list-base-kit";
+import { MarkdownKit } from "./plugins/markdown-kit";
+import { BaseMathKit } from "./plugins/math-base-kit";
+import { BaseMediaKit } from "./plugins/media-base-kit";
+import { BaseSuggestionKit } from "./plugins/suggestion-base-kit";
+import { BaseTableKit } from "./plugins/table-base-kit";
+
+export const BaseEditorKit = [
+  ...BaseBasicBlocksKit,
+  ...BaseCodeBlockKit,
+  ...BaseTableKit,
+  ...BaseMediaKit,
+  ...BaseCalloutKit,
+  ...BaseColumnKit,
+  ...BaseMathKit,
+  ...BaseDateKit,
+  ...BaseLinkKit,
+  ...BaseBasicMarksKit,
+  ...BaseFontKit,
+  ...BaseListKit,
+  ...BaseAlignKit,
+  ...BaseLineHeightKit,
+  ...BaseCommentKit,
+  ...BaseSuggestionKit,
+  ...MarkdownKit,
+];

package/src/components/editor/editor-kit.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { TrailingBlockPlugin, type Value } from "platejs";
+import { type TPlateEditor, useEditorRef } from "platejs/react";
+
+import { AIKit } from "@/components/editor/plugins/ai-kit";
+import { AlignKit } from "@/components/editor/plugins/align-kit";
+import { AutoformatKit } from "@/components/editor/plugins/autoformat-kit";
+import { BasicBlocksKit } from "@/components/editor/plugins/basic-blocks-kit";
+import { BasicMarksKit } from "@/components/editor/plugins/basic-marks-kit";
+import { BlockMenuKit } from "@/components/editor/plugins/block-menu-kit";
+import { BlockPlaceholderKit } from "@/components/editor/plugins/block-placeholder-kit";
+import { CalloutKit } from "@/components/editor/plugins/callout-kit";
+import { CodeBlockKit } from "@/components/editor/plugins/code-block-kit";
+import { ColumnKit } from "@/components/editor/plugins/column-kit";
+import { CommentKit } from "@/components/editor/plugins/comment-kit";
+import { CopilotKit } from "@/components/editor/plugins/copilot-kit";
+import { CursorOverlayKit } from "@/components/editor/plugins/cursor-overlay-kit";
+import { DateKit } from "@/components/editor/plugins/date-kit";
+import { DiscussionKit } from "@/components/editor/plugins/discussion-kit";
+import { DndKit } from "@/components/editor/plugins/dnd-kit";
+import { EmojiKit } from "@/components/editor/plugins/emoji-kit";
+import { ExitBreakKit } from "@/components/editor/plugins/exit-break-kit";
+import { FixedToolbarKit } from "@/components/editor/plugins/fixed-toolbar-kit";
+import { FloatingToolbarKit } from "@/components/editor/plugins/floating-toolbar-kit";
+import { FontKit } from "@/components/editor/plugins/font-kit";
+import { LineHeightKit } from "@/components/editor/plugins/line-height-kit";
+import { LinkKit } from "@/components/editor/plugins/link-kit";
+import { ListKit } from "@/components/editor/plugins/list-kit";
+import { MarkdownKit } from "@/components/editor/plugins/markdown-kit";
+import { MathKit } from "@/components/editor/plugins/math-kit";
+import { MediaKit } from "@/components/editor/plugins/media-kit";
+import { SlashKit } from "@/components/editor/plugins/slash-kit";
+import { SuggestionKit } from "@/components/editor/plugins/suggestion-kit";
+import { TableKit } from "@/components/editor/plugins/table-kit";
+
+export const EditorKit = [
+  ...CopilotKit,
+  ...AIKit,
+
+  // Elements
+  ...BasicBlocksKit,
+  ...CodeBlockKit,
+  ...TableKit,
+  ...MediaKit,
+  ...CalloutKit,
+  ...ColumnKit,
+  ...MathKit,
+  ...DateKit,
+  ...LinkKit,
+
+  // Marks
+  ...BasicMarksKit,
+  ...FontKit,
+
+  // Block Style
+  ...ListKit,
+  ...AlignKit,
+  ...LineHeightKit,
+
+  // Collaboration
+  ...DiscussionKit,
+  ...CommentKit,
+  ...SuggestionKit,
+
+  // Editing
+  ...SlashKit,
+  ...AutoformatKit,
+  ...CursorOverlayKit,
+  ...BlockMenuKit,
+  ...DndKit,
+  ...EmojiKit,
+  ...ExitBreakKit,
+  TrailingBlockPlugin,
+
+  // Parsers
+  ...MarkdownKit,
+
+  // UI
+  ...BlockPlaceholderKit,
+  ...FixedToolbarKit,
+  ...FloatingToolbarKit,
+];
+
+export type MyEditor = TPlateEditor<Value, (typeof EditorKit)[number]>;
+
+export const useEditor = () => useEditorRef<MyEditor>();

package/src/components/editor/md.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { MarkdownPlugin } from "@platejs/markdown";
+import type { Value } from "platejs";
+import { Plate, type PlateEditor, usePlateEditor } from "platejs/react";
+import { type ReactNode, use, useRef } from "react";
+import { EditorKit } from "@/components/editor/editor-kit";
+import { Editor, EditorContainer } from "@/components/editor/ui/editor";
+
+const mdMap: Record<string, Promise<Value>> = {};
+
+export function MDXEditor({
+  defaultValue,
+  onUpdate,
+  children,
+}: {
+  defaultValue: string;
+  onUpdate?: (options: { editor: PlateEditor; getMarkdown: () => string }) => void;
+  children?: ReactNode;
+}) {
+  const initializedRef = useRef(false);
+  const editor = usePlateEditor({
+    plugins: EditorKit,
+    skipInitialization: true,
+  });
+  const deserializedDefault = use(
+    (mdMap[defaultValue] ??= new Promise((res) => {
+      res(editor.getApi(MarkdownPlugin).markdown.deserialize(defaultValue));
+    })),
+  );
+  if (!initializedRef.current) {
+    editor.tf.init({
+      value: deserializedDefault,
+    });
+    initializedRef.current = true;
+  }
+
+  return (
+    <Plate
+      editor={editor}
+      onValueChange={() => {
+        onUpdate?.({
+          editor,
+          getMarkdown() {
+            return editor.getApi(MarkdownPlugin).markdown.serialize();
+          },
+        });
+      }}
+    >
+      {children ?? (
+        <MDXEditorContainer>
+          <MDXEditorView />
+        </MDXEditorContainer>
+      )}
+    </Plate>
+  );
+}
+
+export const MDXEditorContainer = EditorContainer;
+export const MDXEditorView = Editor;

package/src/components/editor/plugins/ai-kit.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { withAIBatch } from "@platejs/ai";
+import {
+  AIChatPlugin,
+  AIPlugin,
+  applyAISuggestions,
+  streamInsertChunk,
+  useChatChunk,
+} from "@platejs/ai/react";
+import { getPluginType, KEYS, PathApi } from "platejs";
+import { usePluginOption } from "platejs/react";
+
+import { AILoadingBar, AIMenu } from "@/components/editor/ui/ai-menu";
+import { AIAnchorElement, AILeaf } from "@/components/editor/ui/ai-node";
+
+import { useChat } from "../use-chat";
+import { CursorOverlayKit } from "./cursor-overlay-kit";
+import { MarkdownKit } from "./markdown-kit";
+
+export const aiChatPlugin = AIChatPlugin.extend({
+  options: {
+    chatOptions: {
+      api: "/api/ai/command",
+      body: {},
+    },
+  },
+  render: {
+    afterContainer: AILoadingBar,
+    afterEditable: AIMenu,
+    node: AIAnchorElement,
+  },
+  shortcuts: { show: { keys: "mod+j" } },
+  useHooks: ({ editor, getOption }) => {
+    useChat();
+
+    const mode = usePluginOption(AIChatPlugin, "mode");
+    const toolName = usePluginOption(AIChatPlugin, "toolName");
+    useChatChunk({
+      onChunk: ({ chunk, isFirst, nodes, text: content }) => {
+        if (isFirst && mode === "insert") {
+          editor.tf.withoutSaving(() => {
+            if (!editor.selection) return;
+
+            editor.tf.insertNodes(
+              {
+                children: [{ text: "" }],
+                type: getPluginType(editor, KEYS.aiChat),
+              },
+              {
+                at: PathApi.next(editor.selection.focus.path.slice(0, 1)),
+              },
+            );
+          });
+          editor.setOption(AIChatPlugin, "streaming", true);
+        }
+
+        if (mode === "insert" && nodes.length > 0) {
+          withAIBatch(
+            editor,
+            () => {
+              if (!getOption("streaming")) return;
+              editor.tf.withScrolling(() => {
+                streamInsertChunk(editor, chunk, {
+                  textProps: {
+                    [getPluginType(editor, KEYS.ai)]: true,
+                  },
+                });
+              });
+            },
+            { split: isFirst },
+          );
+        }
+
+        if (toolName === "edit" && mode === "chat") {
+          withAIBatch(
+            editor,
+            () => {
+              applyAISuggestions(editor, content);
+            },
+            {
+              split: isFirst,
+            },
+          );
+        }
+      },
+      onFinish: () => {
+        editor.setOption(AIChatPlugin, "streaming", false);
+        editor.setOption(AIChatPlugin, "_blockChunks", "");
+        editor.setOption(AIChatPlugin, "_blockPath", null);
+        editor.setOption(AIChatPlugin, "_mdxName", null);
+      },
+    });
+  },
+});
+
+export const AIKit = [
+  ...CursorOverlayKit,
+  ...MarkdownKit,
+  AIPlugin.withComponent(AILeaf),
+  aiChatPlugin,
+];

package/src/components/editor/plugins/align-base-kit.tsx

@@ -0,0 +1,16 @@
+import { BaseTextAlignPlugin } from "@platejs/basic-styles";
+import { KEYS } from "platejs";
+
+export const BaseAlignKit = [
+  BaseTextAlignPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: "start",
+        nodeKey: "align",
+        styleKey: "textAlign",
+        validNodeValues: ["start", "left", "center", "right", "end", "justify"],
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
+    },
+  }),
+];

package/src/components/editor/plugins/align-kit.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { TextAlignPlugin } from "@platejs/basic-styles/react";
+import { KEYS } from "platejs";
+
+export const AlignKit = [
+  TextAlignPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: "start",
+        nodeKey: "align",
+        styleKey: "textAlign",
+        validNodeValues: ["start", "left", "center", "right", "end", "justify"],
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
+    },
+  }),
+];

package/src/components/editor/plugins/autoformat-kit.tsx

@@ -0,0 +1,236 @@
+"use client";
+
+import type { AutoformatRule } from "@platejs/autoformat";
+
+import {
+  autoformatArrow,
+  autoformatLegal,
+  autoformatLegalHtml,
+  autoformatMath,
+  AutoformatPlugin,
+  autoformatPunctuation,
+  autoformatSmartQuotes,
+} from "@platejs/autoformat";
+import { insertEmptyCodeBlock } from "@platejs/code-block";
+import { toggleList } from "@platejs/list";
+import { KEYS } from "platejs";
+
+const autoformatMarks: AutoformatRule[] = [
+  {
+    match: "***",
+    mode: "mark",
+    type: [KEYS.bold, KEYS.italic],
+  },
+  {
+    match: "__*",
+    mode: "mark",
+    type: [KEYS.underline, KEYS.italic],
+  },
+  {
+    match: "__**",
+    mode: "mark",
+    type: [KEYS.underline, KEYS.bold],
+  },
+  {
+    match: "___***",
+    mode: "mark",
+    type: [KEYS.underline, KEYS.bold, KEYS.italic],
+  },
+  {
+    match: "**",
+    mode: "mark",
+    type: KEYS.bold,
+  },
+  {
+    match: "__",
+    mode: "mark",
+    type: KEYS.underline,
+  },
+  {
+    match: "*",
+    mode: "mark",
+    type: KEYS.italic,
+  },
+  {
+    match: "_",
+    mode: "mark",
+    type: KEYS.italic,
+  },
+  {
+    match: "~~",
+    mode: "mark",
+    type: KEYS.strikethrough,
+  },
+  {
+    match: "^",
+    mode: "mark",
+    type: KEYS.sup,
+  },
+  {
+    match: "~",
+    mode: "mark",
+    type: KEYS.sub,
+  },
+  {
+    match: "==",
+    mode: "mark",
+    type: KEYS.highlight,
+  },
+  {
+    match: "≡",
+    mode: "mark",
+    type: KEYS.highlight,
+  },
+  {
+    match: "`",
+    mode: "mark",
+    type: KEYS.code,
+  },
+];
+
+const autoformatBlocks: AutoformatRule[] = [
+  {
+    match: "# ",
+    mode: "block",
+    type: KEYS.h1,
+  },
+  {
+    match: "## ",
+    mode: "block",
+    type: KEYS.h2,
+  },
+  {
+    match: "### ",
+    mode: "block",
+    type: KEYS.h3,
+  },
+  {
+    match: "#### ",
+    mode: "block",
+    type: KEYS.h4,
+  },
+  {
+    match: "##### ",
+    mode: "block",
+    type: KEYS.h5,
+  },
+  {
+    match: "###### ",
+    mode: "block",
+    type: KEYS.h6,
+  },
+  {
+    match: "> ",
+    mode: "block",
+    type: KEYS.blockquote,
+  },
+  {
+    match: "```",
+    mode: "block",
+    type: KEYS.codeBlock,
+    format: (editor) => {
+      insertEmptyCodeBlock(editor, {
+        defaultType: KEYS.p,
+        insertNodesOptions: { select: true },
+      });
+    },
+  },
+  // {
+  //   match: '+ ',
+  //   mode: 'block',
+  //   preFormat: openNextToggles,
+  //   type: KEYS.toggle,
+  // },
+  {
+    match: ["---", "—-", "___ "],
+    mode: "block",
+    type: KEYS.hr,
+    format: (editor) => {
+      editor.tf.setNodes({ type: KEYS.hr });
+      editor.tf.insertNodes({
+        children: [{ text: "" }],
+        type: KEYS.p,
+      });
+    },
+  },
+];
+
+const autoformatLists: AutoformatRule[] = [
+  {
+    match: ["* ", "- "],
+    mode: "block",
+    type: "list",
+    format: (editor) => {
+      toggleList(editor, {
+        listStyleType: KEYS.ul,
+      });
+    },
+  },
+  {
+    match: [String.raw`^\d+\.$ `, String.raw`^\d+\)$ `],
+    matchByRegex: true,
+    mode: "block",
+    type: "list",
+    format: (editor, { matchString }) => {
+      toggleList(editor, {
+        listRestartPolite: Number(matchString) || 1,
+        listStyleType: KEYS.ol,
+      });
+    },
+  },
+  {
+    match: ["[] "],
+    mode: "block",
+    type: "list",
+    format: (editor) => {
+      toggleList(editor, {
+        listStyleType: KEYS.listTodo,
+      });
+      editor.tf.setNodes({
+        checked: false,
+        listStyleType: KEYS.listTodo,
+      });
+    },
+  },
+  {
+    match: ["[x] "],
+    mode: "block",
+    type: "list",
+    format: (editor) => {
+      toggleList(editor, {
+        listStyleType: KEYS.listTodo,
+      });
+      editor.tf.setNodes({
+        checked: true,
+        listStyleType: KEYS.listTodo,
+      });
+    },
+  },
+];
+
+export const AutoformatKit = [
+  AutoformatPlugin.configure({
+    options: {
+      enableUndoOnDelete: true,
+      rules: [
+        ...autoformatBlocks,
+        ...autoformatMarks,
+        ...autoformatSmartQuotes,
+        ...autoformatPunctuation,
+        ...autoformatLegal,
+        ...autoformatLegalHtml,
+        ...autoformatArrow,
+        ...autoformatMath,
+        ...autoformatLists,
+      ].map(
+        (rule): AutoformatRule => ({
+          ...rule,
+          query: (editor) =>
+            !editor.api.some({
+              match: { type: editor.getType(KEYS.codeBlock) },
+            }),
+        }),
+      ),
+    },
+  }),
+];

package/src/components/editor/plugins/basic-blocks-base-kit.tsx

@@ -0,0 +1,34 @@
+import {
+  BaseBlockquotePlugin,
+  BaseH1Plugin,
+  BaseH2Plugin,
+  BaseH3Plugin,
+  BaseH4Plugin,
+  BaseH5Plugin,
+  BaseH6Plugin,
+  BaseHorizontalRulePlugin,
+} from "@platejs/basic-nodes";
+import { BaseParagraphPlugin } from "platejs";
+import { BlockquoteElementStatic } from "@/components/editor/ui/blockquote-node-static";
+import {
+  H1ElementStatic,
+  H2ElementStatic,
+  H3ElementStatic,
+  H4ElementStatic,
+  H5ElementStatic,
+  H6ElementStatic,
+} from "@/components/editor/ui/heading-node-static";
+import { HrElementStatic } from "@/components/editor/ui/hr-node-static";
+import { ParagraphElementStatic } from "@/components/editor/ui/paragraph-node-static";
+
+export const BaseBasicBlocksKit = [
+  BaseParagraphPlugin.withComponent(ParagraphElementStatic),
+  BaseH1Plugin.withComponent(H1ElementStatic),
+  BaseH2Plugin.withComponent(H2ElementStatic),
+  BaseH3Plugin.withComponent(H3ElementStatic),
+  BaseH4Plugin.withComponent(H4ElementStatic),
+  BaseH5Plugin.withComponent(H5ElementStatic),
+  BaseH6Plugin.withComponent(H6ElementStatic),
+  BaseBlockquotePlugin.withComponent(BlockquoteElementStatic),
+  BaseHorizontalRulePlugin.withComponent(HrElementStatic),
+];