@fuma-content/studio 0.1.0

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

@@ -0,0 +1,87 @@
+"use client";
+
+import {
+  BlockquotePlugin,
+  H1Plugin,
+  H2Plugin,
+  H3Plugin,
+  H4Plugin,
+  H5Plugin,
+  H6Plugin,
+  HorizontalRulePlugin,
+} from "@platejs/basic-nodes/react";
+import { ParagraphPlugin } from "platejs/react";
+import { BlockquoteElement } from "@/components/editor/ui/blockquote-node";
+import {
+  H1Element,
+  H2Element,
+  H3Element,
+  H4Element,
+  H5Element,
+  H6Element,
+} from "@/components/editor/ui/heading-node";
+import { HrElement } from "@/components/editor/ui/hr-node";
+import { ParagraphElement } from "@/components/editor/ui/paragraph-node";
+
+export const BasicBlocksKit = [
+  ParagraphPlugin.withComponent(ParagraphElement),
+  H1Plugin.configure({
+    node: {
+      component: H1Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+1" } },
+  }),
+  H2Plugin.configure({
+    node: {
+      component: H2Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+2" } },
+  }),
+  H3Plugin.configure({
+    node: {
+      component: H3Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+3" } },
+  }),
+  H4Plugin.configure({
+    node: {
+      component: H4Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+4" } },
+  }),
+  H5Plugin.configure({
+    node: {
+      component: H5Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+5" } },
+  }),
+  H6Plugin.configure({
+    node: {
+      component: H6Element,
+    },
+    rules: {
+      break: { empty: "reset" },
+    },
+    shortcuts: { toggle: { keys: "mod+alt+6" } },
+  }),
+  BlockquotePlugin.configure({
+    node: { component: BlockquoteElement },
+    shortcuts: { toggle: { keys: "mod+shift+period" } },
+  }),
+  HorizontalRulePlugin.withComponent(HrElement),
+];

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

@@ -0,0 +1,26 @@
+import {
+  BaseBoldPlugin,
+  BaseCodePlugin,
+  BaseHighlightPlugin,
+  BaseItalicPlugin,
+  BaseKbdPlugin,
+  BaseStrikethroughPlugin,
+  BaseSubscriptPlugin,
+  BaseSuperscriptPlugin,
+  BaseUnderlinePlugin,
+} from "@platejs/basic-nodes";
+import { CodeLeafStatic } from "@/components/editor/ui/code-node-static";
+import { HighlightLeafStatic } from "@/components/editor/ui/highlight-node-static";
+import { KbdLeafStatic } from "@/components/editor/ui/kbd-node-static";
+
+export const BaseBasicMarksKit = [
+  BaseBoldPlugin,
+  BaseItalicPlugin,
+  BaseUnderlinePlugin,
+  BaseCodePlugin.withComponent(CodeLeafStatic),
+  BaseStrikethroughPlugin,
+  BaseSubscriptPlugin,
+  BaseSuperscriptPlugin,
+  BaseHighlightPlugin.withComponent(HighlightLeafStatic),
+  BaseKbdPlugin.withComponent(KbdLeafStatic),
+];

package/src/components/editor/plugins/basic-marks-kit.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  BoldPlugin,
+  CodePlugin,
+  HighlightPlugin,
+  ItalicPlugin,
+  KbdPlugin,
+  StrikethroughPlugin,
+  SubscriptPlugin,
+  SuperscriptPlugin,
+  UnderlinePlugin,
+} from "@platejs/basic-nodes/react";
+import { CodeLeaf } from "@/components/editor/ui/code-node";
+import { HighlightLeaf } from "@/components/editor/ui/highlight-node";
+import { KbdLeaf } from "@/components/editor/ui/kbd-node";
+
+export const BasicMarksKit = [
+  BoldPlugin,
+  ItalicPlugin,
+  UnderlinePlugin,
+  CodePlugin.configure({
+    node: { component: CodeLeaf },
+    shortcuts: { toggle: { keys: "mod+e" } },
+  }),
+  StrikethroughPlugin.configure({
+    shortcuts: { toggle: { keys: "mod+shift+x" } },
+  }),
+  SubscriptPlugin.configure({
+    shortcuts: { toggle: { keys: "mod+comma" } },
+  }),
+  SuperscriptPlugin.configure({
+    shortcuts: { toggle: { keys: "mod+period" } },
+  }),
+  HighlightPlugin.configure({
+    node: { component: HighlightLeaf },
+    shortcuts: { toggle: { keys: "mod+shift+h" } },
+  }),
+  KbdPlugin.withComponent(KbdLeaf),
+];

package/src/components/editor/plugins/basic-nodes-kit.tsx

@@ -0,0 +1,6 @@
+"use client";
+
+import { BasicBlocksKit } from "./basic-blocks-kit";
+import { BasicMarksKit } from "./basic-marks-kit";
+
+export const BasicNodesKit = [...BasicBlocksKit, ...BasicMarksKit];

package/src/components/editor/plugins/block-menu-kit.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { BlockMenuPlugin } from "@platejs/selection/react";
+
+import { BlockContextMenu } from "@/components/editor/ui/block-context-menu";
+
+import { BlockSelectionKit } from "./block-selection-kit";
+
+export const BlockMenuKit = [
+  ...BlockSelectionKit,
+  BlockMenuPlugin.configure({
+    render: { aboveEditable: BlockContextMenu },
+  }),
+];

package/src/components/editor/plugins/block-placeholder-kit.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { KEYS } from "platejs";
+import { BlockPlaceholderPlugin } from "platejs/react";
+
+export const BlockPlaceholderKit = [
+  BlockPlaceholderPlugin.configure({
+    options: {
+      className:
+        "before:absolute before:cursor-text before:text-muted-foreground/80 before:content-[attr(placeholder)]",
+      placeholders: {
+        [KEYS.p]: "Type something...",
+      },
+      query: ({ path }) => path.length === 1,
+    },
+  }),
+];

package/src/components/editor/plugins/block-selection-kit.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { AIChatPlugin } from "@platejs/ai/react";
+import { BlockSelectionPlugin } from "@platejs/selection/react";
+import { getPluginTypes, isHotkey, KEYS } from "platejs";
+
+import { BlockSelection } from "@/components/editor/ui/block-selection";
+import { createPlatePlugin } from "platejs/react";
+
+const InlineSelectionPlugin = createPlatePlugin((editor) => ({
+  key: "inline-selection",
+  priority: 200,
+  handlers: {
+    onKeyDown({ event: e }) {
+      const marks = editor.api.marks();
+      if (!marks) return;
+
+      if (isHotkey("escape")(e) && KEYS.sub in marks) {
+        editor.tf.removeMark(KEYS.sub);
+        e.preventDefault();
+        return true;
+      }
+
+      if (isHotkey("escape")(e) && KEYS.sup in marks) {
+        editor.tf.removeMark(KEYS.sup);
+        e.preventDefault();
+        return true;
+      }
+    },
+  },
+}));
+
+export const BlockSelectionKit = [
+  InlineSelectionPlugin,
+  BlockSelectionPlugin.configure(({ editor }) => ({
+    options: {
+      enableContextMenu: true,
+      isSelectable: (element) =>
+        !getPluginTypes(editor, [KEYS.column, KEYS.codeLine, KEYS.td]).includes(element.type),
+      onKeyDownSelecting: (editor, e) => {
+        if (isHotkey("mod+j")(e)) {
+          editor.getApi(AIChatPlugin).aiChat.show();
+        }
+      },
+    },
+    render: {
+      belowRootNodes: (props) => {
+        if (!props.attributes.className?.includes("slate-selectable")) return null;
+
+        return <BlockSelection {...(props as any)} />;
+      },
+    },
+  })),
+];

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

@@ -0,0 +1,5 @@
+import { BaseCalloutPlugin } from "@platejs/callout";
+
+import { CalloutElementStatic } from "@/components/editor/ui/callout-node-static";
+
+export const BaseCalloutKit = [BaseCalloutPlugin.withComponent(CalloutElementStatic)];

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

@@ -0,0 +1,7 @@
+"use client";
+
+import { CalloutPlugin } from "@platejs/callout/react";
+
+import { CalloutElement } from "@/components/editor/ui/callout-node";
+
+export const CalloutKit = [CalloutPlugin.withComponent(CalloutElement)];

package/src/components/editor/plugins/code-block-base-kit.tsx

@@ -0,0 +1,16 @@
+import { BaseCodeBlockPlugin, BaseCodeLinePlugin, BaseCodeSyntaxPlugin } from "@platejs/code-block";
+import {
+  CodeBlockElementStatic,
+  CodeLineElementStatic,
+  CodeSyntaxLeafStatic,
+} from "@/components/editor/ui/code-block-node-static";
+import { lowlight } from "@/lib/lowlight";
+
+export const BaseCodeBlockKit = [
+  BaseCodeBlockPlugin.configure({
+    node: { component: CodeBlockElementStatic },
+    options: { lowlight },
+  }),
+  BaseCodeLinePlugin.withComponent(CodeLineElementStatic),
+  BaseCodeSyntaxPlugin.withComponent(CodeSyntaxLeafStatic),
+];

package/src/components/editor/plugins/code-block-kit.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { CodeBlockPlugin, CodeLinePlugin, CodeSyntaxPlugin } from "@platejs/code-block/react";
+import {
+  CodeBlockElement,
+  CodeLineElement,
+  CodeSyntaxLeaf,
+} from "@/components/editor/ui/code-block-node";
+import { lowlight } from "@/lib/lowlight";
+
+export const CodeBlockKit = [
+  CodeBlockPlugin.configure({
+    node: { component: CodeBlockElement },
+    options: { lowlight },
+    shortcuts: { toggle: { keys: "mod+alt+8" } },
+  }),
+  CodeLinePlugin.withComponent(CodeLineElement),
+  CodeSyntaxPlugin.withComponent(CodeSyntaxLeaf),
+];

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

@@ -0,0 +1,11 @@
+import { BaseColumnItemPlugin, BaseColumnPlugin } from "@platejs/layout";
+
+import {
+  ColumnElementStatic,
+  ColumnGroupElementStatic,
+} from "@/components/editor/ui/column-node-static";
+
+export const BaseColumnKit = [
+  BaseColumnPlugin.withComponent(ColumnGroupElementStatic),
+  BaseColumnItemPlugin.withComponent(ColumnElementStatic),
+];

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

@@ -0,0 +1,10 @@
+"use client";
+
+import { ColumnItemPlugin, ColumnPlugin } from "@platejs/layout/react";
+
+import { ColumnElement, ColumnGroupElement } from "@/components/editor/ui/column-node";
+
+export const ColumnKit = [
+  ColumnPlugin.withComponent(ColumnGroupElement),
+  ColumnItemPlugin.withComponent(ColumnElement),
+];

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

@@ -0,0 +1,5 @@
+import { BaseCommentPlugin } from "@platejs/comment";
+
+import { CommentLeafStatic } from "@/components/editor/ui/comment-node-static";
+
+export const BaseCommentKit = [BaseCommentPlugin.withComponent(CommentLeafStatic)];

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

@@ -0,0 +1,92 @@
+"use client";
+
+import { type BaseCommentConfig, BaseCommentPlugin, getDraftCommentKey } from "@platejs/comment";
+import type { ExtendConfig, Path } from "platejs";
+import { isSlateString } from "platejs";
+import { toTPlatePlugin } from "platejs/react";
+
+import { CommentLeaf } from "@/components/editor/ui/comment-node";
+
+type CommentConfig = ExtendConfig<
+  BaseCommentConfig,
+  {
+    activeId: string | null;
+    commentingBlock: Path | null;
+    hoverId: string | null;
+    uniquePathMap: Map<string, Path>;
+  }
+>;
+
+export const commentPlugin = toTPlatePlugin<CommentConfig>(BaseCommentPlugin, {
+  handlers: {
+    onClick: ({ api, event, setOption, type }) => {
+      let leaf = event.target as HTMLElement;
+      let isSet = false;
+
+      const unsetActiveSuggestion = () => {
+        setOption("activeId", null);
+        isSet = true;
+      };
+
+      if (!isSlateString(leaf)) unsetActiveSuggestion();
+
+      while (leaf.parentElement) {
+        if (leaf.classList.contains(`slate-${type}`)) {
+          const commentsEntry = api.comment?.node();
+
+          if (!commentsEntry) {
+            unsetActiveSuggestion();
+
+            break;
+          }
+
+          const id = api.comment?.nodeId(commentsEntry[0]);
+
+          setOption("activeId", id ?? null);
+          isSet = true;
+
+          break;
+        }
+
+        leaf = leaf.parentElement;
+      }
+
+      if (!isSet) unsetActiveSuggestion();
+    },
+  },
+  options: {
+    activeId: null,
+    commentingBlock: null,
+    hoverId: null,
+    uniquePathMap: new Map(),
+  },
+})
+  .extendTransforms(
+    ({
+      editor,
+      setOption,
+      tf: {
+        comment: { setDraft },
+      },
+    }) => ({
+      setDraft: () => {
+        if (editor.api.isCollapsed()) {
+          editor.tf.select(editor.api.block()?.[1]);
+        }
+
+        setDraft();
+
+        editor.tf.collapse();
+        setOption("activeId", getDraftCommentKey());
+        if (editor.selection) setOption("commentingBlock", editor.selection.focus.path.slice(0, 1));
+      },
+    }),
+  )
+  .configure({
+    node: { component: CommentLeaf },
+    shortcuts: {
+      setDraft: { keys: "mod+shift+m" },
+    },
+  });
+
+export const CommentKit = [commentPlugin];

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

@@ -0,0 +1,70 @@
+"use client";
+
+import { CopilotPlugin } from "@platejs/ai/react";
+import { serializeMd, stripMarkdown } from "@platejs/markdown";
+import type { TElement } from "platejs";
+
+import { GhostText } from "@/components/editor/ui/ghost-text";
+
+import { MarkdownKit } from "./markdown-kit";
+
+export const CopilotKit = [
+  ...MarkdownKit,
+  CopilotPlugin.configure(({ api }) => ({
+    options: {
+      completeOptions: {
+        api: "/api/ai/copilot",
+        body: {
+          system: `You are an advanced AI writing assistant, similar to VSCode Copilot but for general text. Your task is to predict and generate the next part of the text based on the given context.
+  
+  Rules:
+  - Continue the text naturally up to the next punctuation mark (., ,, ;, :, ?, or !).
+  - Maintain style and tone. Don't repeat given text.
+  - For unclear context, provide the most likely continuation.
+  - Handle code snippets, lists, or structured text if needed.
+  - Don't include """ in your response.
+  - CRITICAL: Always end with a punctuation mark.
+  - CRITICAL: Avoid starting a new block. Do not use block formatting like >, #, 1., 2., -, etc. The suggestion should continue in the same block as the context.
+  - If no context is provided or you can't generate a continuation, return "0" without explanation.`,
+        },
+        onFinish: (_, completion) => {
+          if (completion === "0") return;
+
+          api.copilot.setBlockSuggestion({
+            text: stripMarkdown(completion),
+          });
+        },
+      },
+      debounceDelay: 500,
+      renderGhostText: GhostText,
+      getPrompt: ({ editor }) => {
+        const contextEntry = editor.api.block({ highest: true });
+
+        if (!contextEntry) return "";
+
+        const prompt = serializeMd(editor, {
+          value: [contextEntry[0] as TElement],
+        });
+
+        return `Continue the text up to the next punctuation mark:
+  """
+  ${prompt}
+  """`;
+      },
+    },
+    shortcuts: {
+      accept: {
+        keys: "tab",
+      },
+      acceptNextWord: {
+        keys: "mod+right",
+      },
+      reject: {
+        keys: "escape",
+      },
+      triggerSuggestion: {
+        keys: "ctrl+space",
+      },
+    },
+  })),
+];

package/src/components/editor/plugins/cursor-overlay-kit.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { CursorOverlayPlugin } from "@platejs/selection/react";
+
+import { CursorOverlay } from "@/components/editor/ui/cursor-overlay";
+
+export const CursorOverlayKit = [
+  CursorOverlayPlugin.configure({
+    render: {
+      afterEditable: () => <CursorOverlay />,
+    },
+  }),
+];

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

@@ -0,0 +1,5 @@
+import { BaseDatePlugin } from "@platejs/date";
+
+import { DateElementStatic } from "@/components/editor/ui/date-node-static";
+
+export const BaseDateKit = [BaseDatePlugin.withComponent(DateElementStatic)];

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

@@ -0,0 +1,7 @@
+"use client";
+
+import { DatePlugin } from "@platejs/date/react";
+
+import { DateElement } from "@/components/editor/ui/date-node";
+
+export const DateKit = [DatePlugin.withComponent(DateElement)];

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

@@ -0,0 +1,142 @@
+"use client";
+
+import { createPlatePlugin } from "platejs/react";
+import { BlockDiscussion } from "@/components/editor/ui/block-discussion";
+import type { TComment } from "@/components/editor/ui/comment";
+
+export type TDiscussion = {
+  id: string;
+  comments: TComment[];
+  createdAt: Date;
+  isResolved: boolean;
+  userId: string;
+  documentContent?: string;
+};
+
+const discussionsData: TDiscussion[] = [
+  {
+    id: "discussion1",
+    comments: [
+      {
+        id: "comment1",
+        contentRich: [
+          {
+            children: [
+              {
+                text: "Comments are a great way to provide feedback and discuss changes.",
+              },
+            ],
+            type: "p",
+          },
+        ],
+        createdAt: new Date(Date.now() - 600_000),
+        discussionId: "discussion1",
+        isEdited: false,
+        userId: "charlie",
+      },
+      {
+        id: "comment2",
+        contentRich: [
+          {
+            children: [
+              {
+                text: "Agreed! The link to the docs makes it easy to learn more.",
+              },
+            ],
+            type: "p",
+          },
+        ],
+        createdAt: new Date(Date.now() - 500_000),
+        discussionId: "discussion1",
+        isEdited: false,
+        userId: "bob",
+      },
+    ],
+    createdAt: new Date(),
+    documentContent: "comments",
+    isResolved: false,
+    userId: "charlie",
+  },
+  {
+    id: "discussion2",
+    comments: [
+      {
+        id: "comment1",
+        contentRich: [
+          {
+            children: [
+              {
+                text: "Nice demonstration of overlapping annotations with both comments and suggestions!",
+              },
+            ],
+            type: "p",
+          },
+        ],
+        createdAt: new Date(Date.now() - 300_000),
+        discussionId: "discussion2",
+        isEdited: false,
+        userId: "bob",
+      },
+      {
+        id: "comment2",
+        contentRich: [
+          {
+            children: [
+              {
+                text: "This helps users understand how powerful the editor can be.",
+              },
+            ],
+            type: "p",
+          },
+        ],
+        createdAt: new Date(Date.now() - 200_000),
+        discussionId: "discussion2",
+        isEdited: false,
+        userId: "charlie",
+      },
+    ],
+    createdAt: new Date(),
+    documentContent: "overlapping",
+    isResolved: false,
+    userId: "bob",
+  },
+];
+
+const avatarUrl = (seed: string) => `https://api.dicebear.com/9.x/glass/svg?seed=${seed}`;
+
+const usersData: Record<string, { id: string; avatarUrl: string; name: string; hue?: number }> = {
+  alice: {
+    id: "alice",
+    avatarUrl: avatarUrl("alice6"),
+    name: "Alice",
+  },
+  bob: {
+    id: "bob",
+    avatarUrl: avatarUrl("bob4"),
+    name: "Bob",
+  },
+  charlie: {
+    id: "charlie",
+    avatarUrl: avatarUrl("charlie2"),
+    name: "Charlie",
+  },
+};
+
+// This plugin is purely UI. It's only used to store the discussions and users data
+export const discussionPlugin = createPlatePlugin({
+  key: "discussion",
+  options: {
+    currentUserId: "alice",
+    discussions: discussionsData,
+    users: usersData,
+  },
+})
+  .configure({
+    render: { aboveNodes: BlockDiscussion },
+  })
+  .extendSelectors(({ getOption }) => ({
+    currentUser: () => getOption("users")[getOption("currentUserId")],
+    user: (id: string) => getOption("users")[id],
+  }));
+
+export const DiscussionKit = [discussionPlugin];