@fuma-content/studio 0.1.0

package/src/components/editor/ui/slash-node.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { AIChatPlugin } from "@platejs/ai/react";
+import { filterWords } from "@platejs/combobox";
+import {
+  CalendarIcon,
+  ChevronRightIcon,
+  Code2,
+  Columns3Icon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  KeyboardIcon,
+  LightbulbIcon,
+  ListIcon,
+  ListOrdered,
+  PilcrowIcon,
+  Quote,
+  RadicalIcon,
+  SparklesIcon,
+  Square,
+  SubscriptIcon,
+  SuperscriptIcon,
+  Table,
+  TableOfContentsIcon,
+} from "lucide-react";
+import { KEYS, type TComboboxInputElement } from "platejs";
+import type { PlateEditor, PlateElementProps } from "platejs/react";
+import { PlateElement } from "platejs/react";
+import type * as React from "react";
+import { insertBlock, insertInlineElement } from "@/components/editor/transforms";
+import {
+  InlineCombobox,
+  InlineComboboxCollection,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxGroup,
+  InlineComboboxGroupLabel,
+  InlineComboboxInput,
+  InlineComboboxItem,
+  InlineComboboxList,
+} from "./inline-combobox";
+
+interface Group {
+  group: string;
+  items: GroupItem[];
+}
+
+interface GroupItem {
+  icon: React.ReactNode;
+  value: string;
+  onSelect: (editor: PlateEditor, value: string) => void;
+  className?: string;
+  focusEditor?: boolean;
+  keywords?: string[];
+  label?: string;
+}
+
+const groups: Group[] = [
+  {
+    group: "AI",
+    items: [
+      {
+        focusEditor: false,
+        icon: <SparklesIcon />,
+        value: "AI",
+        onSelect: (editor) => {
+          editor.getApi(AIChatPlugin).aiChat.show();
+        },
+      },
+    ],
+  },
+  {
+    group: "Basic blocks",
+    items: [
+      {
+        icon: <PilcrowIcon />,
+        keywords: ["paragraph"],
+        label: "Text",
+        value: KEYS.p,
+      },
+      {
+        icon: <Heading1Icon />,
+        keywords: ["title", "h1"],
+        label: "Heading 1",
+        value: KEYS.h1,
+      },
+      {
+        icon: <Heading2Icon />,
+        keywords: ["subtitle", "h2"],
+        label: "Heading 2",
+        value: KEYS.h2,
+      },
+      {
+        icon: <Heading3Icon />,
+        keywords: ["subtitle", "h3"],
+        label: "Heading 3",
+        value: KEYS.h3,
+      },
+      {
+        icon: <ListIcon />,
+        keywords: ["unordered", "ul", "-"],
+        label: "Bulleted list",
+        value: KEYS.ul,
+      },
+      {
+        icon: <ListOrdered />,
+        keywords: ["ordered", "ol", "1"],
+        label: "Numbered list",
+        value: KEYS.ol,
+      },
+      {
+        icon: <Square />,
+        keywords: ["checklist", "task", "checkbox", "[]"],
+        label: "To-do list",
+        value: KEYS.listTodo,
+      },
+      {
+        icon: <ChevronRightIcon />,
+        keywords: ["collapsible", "expandable"],
+        label: "Toggle",
+        value: KEYS.toggle,
+      },
+      {
+        icon: <Code2 />,
+        keywords: ["```"],
+        label: "Code Block",
+        value: KEYS.codeBlock,
+      },
+      {
+        icon: <Table />,
+        label: "Table",
+        value: KEYS.table,
+      },
+      {
+        icon: <Quote />,
+        keywords: ["citation", "blockquote", "quote", ">"],
+        label: "Blockquote",
+        value: KEYS.blockquote,
+      },
+      {
+        description: "Insert a highlighted block.",
+        icon: <LightbulbIcon />,
+        keywords: ["note"],
+        label: "Callout",
+        value: KEYS.callout,
+      },
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertBlock(editor, value, { upsert: true });
+      },
+    })),
+  },
+  {
+    group: "Advanced blocks",
+    items: [
+      {
+        icon: <TableOfContentsIcon />,
+        keywords: ["toc"],
+        label: "Table of contents",
+        value: KEYS.toc,
+      },
+      {
+        icon: <Columns3Icon />,
+        label: "3 columns",
+        value: "action_three_columns",
+      },
+      {
+        focusEditor: false,
+        icon: <RadicalIcon />,
+        label: "Equation",
+        value: KEYS.equation,
+      },
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertBlock(editor, value, { upsert: true });
+      },
+    })),
+  },
+  {
+    group: "Inline",
+    items: [
+      {
+        focusEditor: true,
+        icon: <CalendarIcon />,
+        keywords: ["time"],
+        label: "Date",
+        value: KEYS.date,
+      },
+      {
+        focusEditor: false,
+        icon: <RadicalIcon />,
+        label: "Inline Equation",
+        value: KEYS.inlineEquation,
+      },
+      {
+        focusEditor: true,
+        icon: <KeyboardIcon />,
+        label: "Keyboard input",
+        value: KEYS.kbd,
+      },
+      {
+        focusEditor: true,
+        icon: <SuperscriptIcon />,
+        label: "Superscript",
+        value: KEYS.sup,
+      },
+      {
+        focusEditor: true,
+        icon: <SubscriptIcon />,
+        label: "Subscript",
+        value: KEYS.sub,
+      },
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertInlineElement(editor, value);
+      },
+    })),
+  },
+];
+
+export function SlashInputElement(props: PlateElementProps<TComboboxInputElement>) {
+  const { editor, element } = props;
+
+  return (
+    <PlateElement {...props} as="span">
+      <InlineCombobox
+        element={element}
+        trigger="/"
+        items={groups}
+        filter={(itemValue, search) => {
+          const item = itemValue as GroupItem;
+
+          return [item.value, ...(item.keywords ?? []), item.label].some(
+            (keyword) => keyword && filterWords(keyword, search),
+          );
+        }}
+      >
+        <InlineComboboxInput />
+
+        <InlineComboboxContent>
+          <InlineComboboxEmpty>No results</InlineComboboxEmpty>
+
+          <InlineComboboxList>
+            {(group: Group) => (
+              <InlineComboboxGroup key={group.group} items={group.items}>
+                <InlineComboboxGroupLabel>{group.group}</InlineComboboxGroupLabel>
+
+                <InlineComboboxCollection>
+                  {(item: GroupItem) => (
+                    <InlineComboboxItem
+                      key={item.value}
+                      value={item}
+                      onClick={() => item.onSelect(editor, item.value)}
+                      focusEditor={item.focusEditor}
+                    >
+                      <div className="mr-2 text-muted-foreground">{item.icon}</div>
+                      {item.label ?? item.value}
+                    </InlineComboboxItem>
+                  )}
+                </InlineComboboxCollection>
+              </InlineComboboxGroup>
+            )}
+          </InlineComboboxList>
+        </InlineComboboxContent>
+      </InlineCombobox>
+
+      {props.children}
+    </PlateElement>
+  );
+}

package/src/components/editor/ui/suggestion-node-static.tsx

@@ -0,0 +1,30 @@
+import type { TSuggestionText } from "platejs";
+import type { SlateLeafProps } from "platejs/static";
+
+import { BaseSuggestionPlugin } from "@platejs/suggestion";
+import { SlateLeaf } from "platejs/static";
+
+import { cn } from "@/lib/utils";
+
+export function SuggestionLeafStatic(props: SlateLeafProps<TSuggestionText>) {
+  const { editor, leaf } = props;
+
+  const dataList = editor.getApi(BaseSuggestionPlugin).suggestion.dataList(leaf);
+  const hasRemove = dataList.some((data) => data.type === "remove");
+  const diffOperation = { type: hasRemove ? "delete" : "insert" } as const;
+
+  const Component = ({ delete: "del", insert: "ins", update: "span" } as const)[diffOperation.type];
+
+  return (
+    <SlateLeaf
+      {...props}
+      as={Component}
+      className={cn(
+        "border-b-2 border-b-brand/[.24] bg-brand/[.08] text-brand/80 no-underline transition-colors duration-200",
+        hasRemove && "border-b-gray-300 bg-gray-300/25 text-gray-400 line-through",
+      )}
+    >
+      {props.children}
+    </SlateLeaf>
+  );
+}

package/src/components/editor/ui/suggestion-node.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+
+import type { TSuggestionData, TSuggestionText } from "platejs";
+import type { PlateLeafProps, RenderNodeWrapper } from "platejs/react";
+
+import { cva } from "class-variance-authority";
+import { CornerDownLeftIcon } from "lucide-react";
+import { PlateLeaf, useEditorPlugin, usePluginOption } from "platejs/react";
+
+import { cn } from "@/lib/utils";
+import {
+  type SuggestionConfig,
+  suggestionPlugin,
+} from "@/components/editor/plugins/suggestion-kit";
+
+const suggestionVariants = cva(
+  cn("bg-emerald-100 text-emerald-700 no-underline transition-colors duration-200"),
+  {
+    defaultVariants: {
+      insertActive: false,
+      remove: false,
+      removeActive: false,
+    },
+    variants: {
+      insertActive: {
+        false: "",
+        true: "bg-emerald-200/80",
+      },
+      remove: {
+        false: "",
+        true: "bg-red-100 text-red-700",
+      },
+      removeActive: {
+        false: "",
+        true: "bg-red-200/80 no-underline",
+      },
+    },
+  },
+);
+
+export function SuggestionLeaf(props: PlateLeafProps<TSuggestionText>) {
+  const { api, setOption } = useEditorPlugin(suggestionPlugin);
+  const leaf = props.leaf;
+
+  const leafId: string = api.suggestion.nodeId(leaf) ?? "";
+  const activeSuggestionId = usePluginOption(suggestionPlugin, "activeId");
+  const hoverSuggestionId = usePluginOption(suggestionPlugin, "hoverId");
+  const dataList = api.suggestion.dataList(leaf);
+
+  const hasRemove = dataList.some((data) => data.type === "remove");
+  const hasActive = dataList.some((data) => data.id === activeSuggestionId);
+  const hasHover = dataList.some((data) => data.id === hoverSuggestionId);
+
+  const diffOperation = { type: hasRemove ? "delete" : "insert" } as const;
+
+  const Component = ({ delete: "del", insert: "ins", update: "span" } as const)[diffOperation.type];
+
+  return (
+    <PlateLeaf
+      {...props}
+      as={Component}
+      className={cn(
+        suggestionVariants({
+          insertActive: hasActive || hasHover,
+          remove: hasRemove,
+          removeActive: (hasActive || hasHover) && hasRemove,
+        }),
+      )}
+      attributes={{
+        ...props.attributes,
+        onMouseEnter: () => setOption("hoverId", leafId),
+        onMouseLeave: () => setOption("hoverId", null),
+      }}
+    >
+      {props.children}
+    </PlateLeaf>
+  );
+}
+export const SuggestionLineBreak: RenderNodeWrapper<SuggestionConfig> = ({ api, element }) => {
+  if (!api.suggestion.isBlockSuggestion(element)) return;
+
+  const suggestionData = element.suggestion;
+
+  return function Component({ children }) {
+    return (
+      <SuggestionLineBreakContent suggestionData={suggestionData}>
+        {children}
+      </SuggestionLineBreakContent>
+    );
+  };
+};
+
+function SuggestionLineBreakContent({
+  children,
+  suggestionData,
+}: {
+  children: React.ReactNode;
+  suggestionData: TSuggestionData;
+}) {
+  const { isLineBreak, type } = suggestionData;
+  const isRemove = type === "remove";
+  const isInsert = type === "insert";
+
+  const activeSuggestionId = usePluginOption(suggestionPlugin, "activeId");
+  const hoverSuggestionId = usePluginOption(suggestionPlugin, "hoverId");
+
+  const isActive = activeSuggestionId === suggestionData.id;
+  const isHover = hoverSuggestionId === suggestionData.id;
+
+  const spanRef = React.useRef<HTMLSpanElement>(null);
+  const { setOption } = useEditorPlugin(suggestionPlugin);
+
+  return (
+    <>
+      {isLineBreak ? (
+        <>
+          {children}
+          <span
+            ref={spanRef}
+            className={cn(
+              "absolute text-justify",
+              suggestionVariants({
+                insertActive: isInsert && (isActive || isHover),
+                remove: isRemove,
+                removeActive: (isActive || isHover) && isRemove,
+              }),
+            )}
+            style={{
+              bottom: 3.5,
+              height: 21,
+            }}
+            contentEditable={false}
+          >
+            <CornerDownLeftIcon className="mt-0.5 size-4" />
+          </span>
+        </>
+      ) : (
+        <div
+          className={cn(
+            suggestionVariants({
+              insertActive: isInsert && (isActive || isHover),
+              remove: isRemove,
+              removeActive: (isActive || isHover) && isRemove,
+            }),
+          )}
+          onMouseEnter={() => setOption("hoverId", suggestionData.id)}
+          onMouseLeave={() => setOption("hoverId", null)}
+          data-block-suggestion="true"
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,25 @@
+"use client";
+
+import { SuggestionPlugin } from "@platejs/suggestion/react";
+import { PencilLineIcon } from "lucide-react";
+import { useEditorPlugin, usePluginOption } from "platejs/react";
+
+import { cn } from "@/lib/utils";
+
+import { ToolbarButton } from "../../ui/toolbar";
+
+export function SuggestionToolbarButton() {
+  const { setOption } = useEditorPlugin(SuggestionPlugin);
+  const isSuggesting = usePluginOption(SuggestionPlugin, "isSuggesting");
+
+  return (
+    <ToolbarButton
+      className={cn(isSuggesting && "text-brand/80 hover:text-brand/80")}
+      onClick={() => setOption("isSuggesting", !isSuggesting)}
+      onMouseDown={(e) => e.preventDefault()}
+      tooltip={isSuggesting ? "Turn off suggesting" : "Suggestion edits"}
+    >
+      <PencilLineIcon />
+    </ToolbarButton>
+  );
+}