@fuma-content/studio 0.1.0

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

@@ -0,0 +1,25 @@
+"use client";
+
+import { DndPlugin } from "@platejs/dnd";
+import { PlaceholderPlugin } from "@platejs/media/react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+import { BlockDraggable } from "@/components/editor/ui/block-draggable";
+
+export const DndKit = [
+  DndPlugin.configure({
+    options: {
+      enableScroller: true,
+      onDropFiles: ({ dragItem, editor, target }) => {
+        editor
+          .getTransforms(PlaceholderPlugin)
+          .insert.media(dragItem.files, { at: target, nextBlock: false });
+      },
+    },
+    render: {
+      aboveNodes: BlockDraggable,
+      aboveSlate: ({ children }) => <DndProvider backend={HTML5Backend}>{children}</DndProvider>,
+    },
+  }),
+];

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

@@ -0,0 +1,13 @@
+"use client";
+
+import emojiMartData from "@emoji-mart/data";
+import { EmojiInputPlugin, EmojiPlugin } from "@platejs/emoji/react";
+
+import { EmojiInputElement } from "@/components/editor/ui/emoji-node";
+
+export const EmojiKit = [
+  EmojiPlugin.configure({
+    options: { data: emojiMartData as any },
+  }),
+  EmojiInputPlugin.withComponent(EmojiInputElement),
+];

package/src/components/editor/plugins/exit-break-kit.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { ExitBreakPlugin } from "platejs";
+
+export const ExitBreakKit = [
+  ExitBreakPlugin.configure({
+    shortcuts: {
+      insert: { keys: "mod+enter" },
+      insertBefore: { keys: "mod+shift+enter" },
+    },
+  }),
+];

package/src/components/editor/plugins/fixed-toolbar-kit.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { createPlatePlugin } from "platejs/react";
+
+import { FixedToolbar } from "@/components/editor/ui/fixed-toolbar";
+import { FixedToolbarButtons } from "@/components/editor/ui/fixed-toolbar-buttons";
+
+export const FixedToolbarKit = [
+  createPlatePlugin({
+    key: "fixed-toolbar",
+    render: {
+      beforeEditable: () => (
+        <FixedToolbar>
+          <FixedToolbarButtons />
+        </FixedToolbar>
+      ),
+    },
+  }),
+];

package/src/components/editor/plugins/floating-toolbar-kit.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { createPlatePlugin } from "platejs/react";
+
+import { FloatingToolbar } from "@/components/editor/ui/floating-toolbar";
+import { FloatingToolbarButtons } from "@/components/editor/ui/floating-toolbar-buttons";
+
+export const FloatingToolbarKit = [
+  createPlatePlugin({
+    key: "floating-toolbar",
+    render: {
+      afterEditable: () => (
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
+      ),
+    },
+  }),
+];

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

@@ -0,0 +1,20 @@
+import type { SlatePluginConfig } from "platejs";
+
+import {
+  BaseFontBackgroundColorPlugin,
+  BaseFontColorPlugin,
+  BaseFontFamilyPlugin,
+  BaseFontSizePlugin,
+} from "@platejs/basic-styles";
+import { KEYS } from "platejs";
+
+const options = {
+  inject: { targetPlugins: [KEYS.p] },
+} satisfies SlatePluginConfig;
+
+export const BaseFontKit = [
+  BaseFontColorPlugin.configure(options),
+  BaseFontBackgroundColorPlugin.configure(options),
+  BaseFontSizePlugin.configure(options),
+  BaseFontFamilyPlugin.configure(options),
+];

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

@@ -0,0 +1,29 @@
+"use client";
+
+import type { PlatePluginConfig } from "platejs/react";
+
+import {
+  FontBackgroundColorPlugin,
+  FontColorPlugin,
+  FontFamilyPlugin,
+  FontSizePlugin,
+} from "@platejs/basic-styles/react";
+import { KEYS } from "platejs";
+
+const options = {
+  inject: { targetPlugins: [KEYS.p] },
+} satisfies PlatePluginConfig;
+
+export const FontKit = [
+  FontColorPlugin.configure({
+    inject: {
+      ...options.inject,
+      nodeProps: {
+        defaultNodeValue: "black",
+      },
+    },
+  }),
+  FontBackgroundColorPlugin.configure(options),
+  FontSizePlugin.configure(options),
+  FontFamilyPlugin.configure(options),
+];

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

@@ -0,0 +1,13 @@
+import { BaseIndentPlugin } from "@platejs/indent";
+import { KEYS } from "platejs";
+
+export const BaseIndentKit = [
+  BaseIndentPlugin.configure({
+    inject: {
+      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote, KEYS.codeBlock, KEYS.toggle],
+    },
+    options: {
+      offset: 24,
+    },
+  }),
+];

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

@@ -0,0 +1,22 @@
+"use client";
+
+import { IndentPlugin } from "@platejs/indent/react";
+import { KEYS } from "platejs";
+
+export const IndentKit = [
+  IndentPlugin.configure({
+    inject: {
+      targetPlugins: [
+        ...KEYS.heading,
+        KEYS.p,
+        KEYS.blockquote,
+        KEYS.codeBlock,
+        KEYS.toggle,
+        KEYS.img,
+      ],
+    },
+    options: {
+      offset: 24,
+    },
+  }),
+];

package/src/components/editor/plugins/line-height-base-kit.tsx

@@ -0,0 +1,14 @@
+import { BaseLineHeightPlugin } from "@platejs/basic-styles";
+import { KEYS } from "platejs";
+
+export const BaseLineHeightKit = [
+  BaseLineHeightPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: 1.5,
+        validNodeValues: [1, 1.2, 1.5, 2, 3],
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p],
+    },
+  }),
+];

package/src/components/editor/plugins/line-height-kit.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { LineHeightPlugin } from "@platejs/basic-styles/react";
+import { KEYS } from "platejs";
+
+export const LineHeightKit = [
+  LineHeightPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: 1.5,
+        validNodeValues: [1, 1.2, 1.5, 2, 3],
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p],
+    },
+  }),
+];

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

@@ -0,0 +1,5 @@
+import { BaseLinkPlugin } from "@platejs/link";
+
+import { LinkElementStatic } from "@/components/editor/ui/link-node-static";
+
+export const BaseLinkKit = [BaseLinkPlugin.withComponent(LinkElementStatic)];

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

@@ -0,0 +1,15 @@
+"use client";
+
+import { LinkPlugin } from "@platejs/link/react";
+
+import { LinkElement } from "@/components/editor/ui/link-node";
+import { LinkFloatingToolbar } from "@/components/editor/ui/link-toolbar";
+
+export const LinkKit = [
+  LinkPlugin.configure({
+    render: {
+      node: LinkElement,
+      afterEditable: () => <LinkFloatingToolbar />,
+    },
+  }),
+];

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

@@ -0,0 +1,17 @@
+import { BaseListPlugin } from "@platejs/list";
+import { KEYS } from "platejs";
+
+import { BaseIndentKit } from "@/components/editor/plugins/indent-base-kit";
+import { BlockListStatic } from "@/components/editor/ui/block-list-static";
+
+export const BaseListKit = [
+  ...BaseIndentKit,
+  BaseListPlugin.configure({
+    inject: {
+      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote, KEYS.codeBlock, KEYS.toggle],
+    },
+    render: {
+      belowNodes: BlockListStatic,
+    },
+  }),
+];

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { ListPlugin } from "@platejs/list/react";
+import { KEYS } from "platejs";
+
+import { IndentKit } from "@/components/editor/plugins/indent-kit";
+import { BlockList } from "@/components/editor/ui/block-list";
+
+export const ListKit = [
+  ...IndentKit,
+  ListPlugin.configure({
+    inject: {
+      targetPlugins: [
+        ...KEYS.heading,
+        KEYS.p,
+        KEYS.blockquote,
+        KEYS.codeBlock,
+        KEYS.toggle,
+        KEYS.img,
+      ],
+    },
+    render: {
+      belowNodes: BlockList,
+    },
+  }),
+];

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

@@ -0,0 +1,13 @@
+import { MarkdownPlugin, remarkMdx } from "@platejs/markdown";
+import { KEYS } from "platejs";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+
+export const MarkdownKit = [
+  MarkdownPlugin.configure({
+    options: {
+      plainMarks: [KEYS.suggestion, KEYS.comment],
+      remarkPlugins: [remarkMath, remarkGfm, remarkMdx],
+    },
+  }),
+];

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

@@ -0,0 +1,11 @@
+import { BaseEquationPlugin, BaseInlineEquationPlugin } from "@platejs/math";
+
+import {
+  EquationElementStatic,
+  InlineEquationElementStatic,
+} from "@/components/editor/ui/equation-node-static";
+
+export const BaseMathKit = [
+  BaseInlineEquationPlugin.withComponent(InlineEquationElementStatic),
+  BaseEquationPlugin.withComponent(EquationElementStatic),
+];

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

@@ -0,0 +1,10 @@
+"use client";
+
+import { EquationPlugin, InlineEquationPlugin } from "@platejs/math/react";
+
+import { EquationElement, InlineEquationElement } from "@/components/editor/ui/equation-node";
+
+export const MathKit = [
+  InlineEquationPlugin.withComponent(InlineEquationElement),
+  EquationPlugin.withComponent(EquationElement),
+];

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

@@ -0,0 +1,25 @@
+import { BaseCaptionPlugin } from "@platejs/caption";
+import {
+  BaseImagePlugin,
+  BaseMediaEmbedPlugin,
+  BasePlaceholderPlugin,
+  BaseVideoPlugin,
+} from "@platejs/media";
+import { KEYS } from "platejs";
+
+import { ImageElementStatic } from "@/components/editor/ui/media-image-node-static";
+import { VideoElementStatic } from "@/components/editor/ui/media-video-node-static";
+
+export const BaseMediaKit = [
+  BaseImagePlugin.withComponent(ImageElementStatic),
+  BaseVideoPlugin.withComponent(VideoElementStatic),
+  BaseCaptionPlugin.configure({
+    options: {
+      query: {
+        allow: [KEYS.img, KEYS.video, KEYS.audio, KEYS.file, KEYS.mediaEmbed],
+      },
+    },
+  }),
+  BaseMediaEmbedPlugin,
+  BasePlaceholderPlugin,
+];

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { CaptionPlugin } from "@platejs/caption/react";
+import { ImagePlugin, PlaceholderPlugin } from "@platejs/media/react";
+import { KEYS } from "platejs";
+
+import { ImageElement } from "@/components/editor/ui/media-image-node";
+import { PlaceholderElement } from "@/components/editor/ui/media-placeholder-node";
+import { MediaPreviewDialog } from "@/components/editor/ui/media-preview-dialog";
+import { MediaUploadToast } from "@/components/editor/ui/media-upload-toast";
+
+export const MediaKit = [
+  ImagePlugin.configure({
+    options: { disableUploadInsert: true },
+    render: { afterEditable: MediaPreviewDialog, node: ImageElement },
+  }),
+  PlaceholderPlugin.configure({
+    options: { disableEmptyPlaceholder: true },
+    render: { afterEditable: MediaUploadToast, node: PlaceholderElement },
+  }),
+  CaptionPlugin.configure({
+    options: {
+      query: {
+        allow: [KEYS.img, KEYS.video, KEYS.audio, KEYS.file, KEYS.mediaEmbed],
+      },
+    },
+  }),
+];

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

@@ -0,0 +1,18 @@
+"use client";
+
+import { SlashInputPlugin, SlashPlugin } from "@platejs/slash-command/react";
+import { KEYS } from "platejs";
+
+import { SlashInputElement } from "@/components/editor/ui/slash-node";
+
+export const SlashKit = [
+  SlashPlugin.configure({
+    options: {
+      triggerQuery: (editor) =>
+        !editor.api.some({
+          match: { type: editor.getType(KEYS.codeBlock) },
+        }),
+    },
+  }),
+  SlashInputPlugin.withComponent(SlashInputElement),
+];

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

@@ -0,0 +1,5 @@
+import { BaseSuggestionPlugin } from "@platejs/suggestion";
+
+import { SuggestionLeafStatic } from "@/components/editor/ui/suggestion-node-static";
+
+export const BaseSuggestionKit = [BaseSuggestionPlugin.withComponent(SuggestionLeafStatic)];

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

@@ -0,0 +1,83 @@
+"use client";
+
+import { type BaseSuggestionConfig, BaseSuggestionPlugin } from "@platejs/suggestion";
+import type { ExtendConfig, Path } from "platejs";
+import { isSlateEditor, isSlateString } from "platejs";
+import { toTPlatePlugin } from "platejs/react";
+
+import { SuggestionLeaf, SuggestionLineBreak } from "@/components/editor/ui/suggestion-node";
+
+import { discussionPlugin } from "./discussion-kit";
+
+export type SuggestionConfig = ExtendConfig<
+  BaseSuggestionConfig,
+  {
+    activeId: string | null;
+    hoverId: string | null;
+    uniquePathMap: Map<string, Path>;
+  }
+>;
+
+export const suggestionPlugin = toTPlatePlugin<SuggestionConfig>(
+  BaseSuggestionPlugin,
+  ({ editor }) => ({
+    options: {
+      activeId: null,
+      currentUserId: editor.getOption(discussionPlugin, "currentUserId"),
+      hoverId: null,
+      uniquePathMap: new Map(),
+    },
+  }),
+).configure({
+  handlers: {
+    // unset active suggestion when clicking outside of suggestion
+    onClick: ({ api, event, setOption, type }) => {
+      let leaf = event.target as HTMLElement;
+      let isSet = false;
+
+      const isBlockLeaf = leaf.dataset.blockSuggestion === "true";
+
+      const unsetActiveSuggestion = () => {
+        setOption("activeId", null);
+        isSet = true;
+      };
+
+      if (!isSlateString(leaf) && !isBlockLeaf) {
+        unsetActiveSuggestion();
+      }
+
+      while (leaf.parentElement && !isSlateEditor(leaf.parentElement)) {
+        const isBlockSuggestion = leaf.dataset.blockSuggestion === "true";
+
+        if (leaf.classList.contains(`slate-${type}`) || isBlockSuggestion) {
+          const suggestionEntry = api.suggestion?.node({
+            isText: !isBlockSuggestion,
+          });
+
+          if (!suggestionEntry) {
+            unsetActiveSuggestion();
+
+            break;
+          }
+
+          const id = api.suggestion?.nodeId(suggestionEntry[0]);
+          setOption("activeId", id ?? null);
+
+          isSet = true;
+
+          break;
+        }
+
+        leaf = leaf.parentElement;
+      }
+
+      if (!isSet) unsetActiveSuggestion();
+    },
+  },
+  render: {
+    belowNodes: SuggestionLineBreak as any,
+    node: SuggestionLeaf,
+  },
+});
+
+export const SuggestionKit = [suggestionPlugin];

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

@@ -0,0 +1,20 @@
+import {
+  BaseTableCellHeaderPlugin,
+  BaseTableCellPlugin,
+  BaseTablePlugin,
+  BaseTableRowPlugin,
+} from "@platejs/table";
+
+import {
+  TableCellElementStatic,
+  TableCellHeaderElementStatic,
+  TableElementStatic,
+  TableRowElementStatic,
+} from "@/components/editor/ui/table-node-static";
+
+export const BaseTableKit = [
+  BaseTablePlugin.withComponent(TableElementStatic),
+  BaseTableRowPlugin.withComponent(TableRowElementStatic),
+  BaseTableCellPlugin.withComponent(TableCellElementStatic),
+  BaseTableCellHeaderPlugin.withComponent(TableCellHeaderElementStatic),
+];

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

@@ -0,0 +1,22 @@
+"use client";
+
+import {
+  TableCellHeaderPlugin,
+  TableCellPlugin,
+  TablePlugin,
+  TableRowPlugin,
+} from "@platejs/table/react";
+
+import {
+  TableCellElement,
+  TableCellHeaderElement,
+  TableElement,
+  TableRowElement,
+} from "@/components/editor/ui/table-node";
+
+export const TableKit = [
+  TablePlugin.withComponent(TableElement),
+  TableRowPlugin.withComponent(TableRowElement),
+  TableCellPlugin.withComponent(TableCellElement),
+  TableCellHeaderPlugin.withComponent(TableCellHeaderElement),
+];