@fuma-content/studio 0.1.0

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

@@ -0,0 +1,86 @@
+"use client";
+
+import type { TDateElement } from "platejs";
+import type { PlateElementProps } from "platejs/react";
+
+import { PlateElement, useReadOnly } from "platejs/react";
+
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export function DateElement(props: PlateElementProps<TDateElement>) {
+  const { editor, element } = props;
+
+  const readOnly = useReadOnly();
+
+  const trigger = (
+    <span
+      className={cn("w-fit cursor-pointer rounded-sm bg-muted px-1 text-muted-foreground")}
+      contentEditable={false}
+      draggable
+    >
+      {element.date ? (
+        (() => {
+          const today = new Date();
+          const elementDate = new Date(element.date);
+          const isToday =
+            elementDate.getDate() === today.getDate() &&
+            elementDate.getMonth() === today.getMonth() &&
+            elementDate.getFullYear() === today.getFullYear();
+
+          const isYesterday =
+            new Date(today.setDate(today.getDate() - 1)).toDateString() ===
+            elementDate.toDateString();
+          const isTomorrow =
+            new Date(today.setDate(today.getDate() + 2)).toDateString() ===
+            elementDate.toDateString();
+
+          if (isToday) return "Today";
+          if (isYesterday) return "Yesterday";
+          if (isTomorrow) return "Tomorrow";
+
+          return elementDate.toLocaleDateString(undefined, {
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+          });
+        })()
+      ) : (
+        <span>Pick a date</span>
+      )}
+    </span>
+  );
+
+  if (readOnly) {
+    return trigger;
+  }
+
+  return (
+    <PlateElement
+      {...props}
+      className="inline-block"
+      attributes={{
+        ...props.attributes,
+        contentEditable: false,
+      }}
+    >
+      <Popover>
+        <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+        <PopoverContent className="w-auto p-0">
+          <Calendar
+            selected={new Date(element.date as string)}
+            onSelect={(date) => {
+              if (!date) return;
+
+              editor.tf.setNodes({ date: date.toDateString() }, { at: element });
+            }}
+            mode="single"
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+      {props.children}
+    </PlateElement>
+  );
+}

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

@@ -0,0 +1,47 @@
+import type { VariantProps } from "class-variance-authority";
+
+import { cva } from "class-variance-authority";
+import { type PlateStaticProps, PlateStatic } from "platejs/static";
+
+import { cn } from "@/lib/utils";
+
+export const editorVariants = cva(
+  cn(
+    "group/editor",
+    "relative w-full cursor-text select-text overflow-x-hidden whitespace-pre-wrap break-words",
+    "rounded-md ring-offset-background focus-visible:outline-none",
+    "placeholder:text-muted-foreground/80 **:data-slate-placeholder:top-[auto_!important] **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!",
+    "[&_strong]:font-bold",
+  ),
+  {
+    defaultVariants: {
+      variant: "none",
+    },
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+      },
+      focused: {
+        true: "ring-2 ring-ring ring-offset-2",
+      },
+      variant: {
+        ai: "w-full px-0 text-base md:text-sm",
+        aiChat:
+          "max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-5 py-3 text-base md:text-sm",
+        default: "size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]",
+        demo: "size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]",
+        fullWidth: "size-full px-16 pt-4 pb-72 text-base sm:px-24",
+        none: "",
+        select: "px-3 py-2 text-base data-readonly:w-fit",
+      },
+    },
+  },
+);
+
+export function EditorStatic({
+  className,
+  variant,
+  ...props
+}: PlateStaticProps & VariantProps<typeof editorVariants>) {
+  return <PlateStatic className={cn(editorVariants({ variant }), className)} {...props} />;
+}

package/src/components/editor/ui/editor.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import type { PlateContentProps, PlateViewProps } from "platejs/react";
+import { PlateContainer, PlateContent, PlateView } from "platejs/react";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const editorContainerVariants = cva(
+  "w-full cursor-text select-text caret-primary selection:bg-brand/25 focus-visible:outline-none [&_.slate-selection-area]:z-50 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15",
+  {
+    defaultVariants: {
+      variant: "card",
+    },
+    variants: {
+      variant: {
+        comment: cn(
+          "flex flex-wrap justify-between gap-1 px-1 py-0.5 text-sm overflow-y-auto rounded-md border-[1.5px] border-transparent bg-transparent",
+          "has-[[data-slate-editor]:focus]:border-brand/50 has-[[data-slate-editor]:focus]:ring-2 has-[[data-slate-editor]:focus]:ring-brand/30",
+          "has-aria-disabled:border-input has-aria-disabled:bg-muted",
+        ),
+        card: "border bg-card text-card-foreground rounded-xl",
+        select: cn(
+          "group overflow-y-auto rounded-md border border-input ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          "has-data-readonly:w-fit has-data-readonly:cursor-default has-data-readonly:border-transparent has-data-readonly:focus-within:[box-shadow:none]",
+        ),
+      },
+    },
+  },
+);
+
+export function EditorContainer({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof editorContainerVariants>) {
+  return (
+    <PlateContainer
+      className={cn(
+        "ignore-click-outside/toolbar",
+        editorContainerVariants({ variant }),
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const editorVariants = cva(
+  cn(
+    "group/editor",
+    "relative w-full cursor-text select-text overflow-x-hidden whitespace-pre-wrap break-words",
+    "rounded-md ring-offset-background focus-visible:outline-none",
+    "**:data-slate-placeholder:!top-1/2 **:data-slate-placeholder:-translate-y-1/2 placeholder:text-muted-foreground/80 **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!",
+    "[&_strong]:font-bold",
+  ),
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+      },
+      focused: {
+        true: "ring-2 ring-ring ring-offset-2",
+      },
+      variant: {
+        ai: "w-full px-0 text-base md:text-sm",
+        aiChat:
+          "max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm",
+        comment: "rounded-none border-none bg-transparent text-sm",
+        default: "size-full px-8 py-4 text-base",
+        fullWidth: "size-full px-16 pt-4 pb-72 text-base sm:px-24",
+        none: "",
+        select: "px-3 py-2 text-base data-readonly:w-fit",
+      },
+    },
+  },
+);
+
+export type EditorProps = PlateContentProps & VariantProps<typeof editorVariants>;
+
+export const Editor = ({
+  className,
+  disabled,
+  focused,
+  variant,
+  ref,
+  ...props
+}: EditorProps & { ref?: React.RefObject<HTMLDivElement | null> }) => (
+  <PlateContent
+    ref={ref}
+    className={cn(
+      editorVariants({
+        disabled,
+        focused,
+        variant,
+      }),
+      className,
+    )}
+    disabled={disabled}
+    disableDefaultStyles
+    {...props}
+  />
+);
+
+Editor.displayName = "Editor";
+
+export function EditorView({
+  className,
+  variant,
+  ...props
+}: PlateViewProps & VariantProps<typeof editorVariants>) {
+  return <PlateView {...props} className={cn(editorVariants({ variant }), className)} />;
+}
+
+EditorView.displayName = "EditorView";

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { type Emoji, EmojiInlineIndexSearch, insertEmoji } from "@platejs/emoji";
+import { EmojiPlugin } from "@platejs/emoji/react";
+import type { PlateElementProps } from "platejs/react";
+import { PlateElement, usePluginOption } from "platejs/react";
+import * as React from "react";
+import {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxInput,
+  InlineComboboxItem,
+  InlineComboboxList,
+} from "./inline-combobox";
+
+const TRAILING_COLON_REGEX = /:$/;
+
+export function EmojiInputElement(props: PlateElementProps) {
+  const { children, editor, element } = props;
+  const data = usePluginOption(EmojiPlugin, "data")!;
+  const [value, setValue] = React.useState("");
+  const deferredValue = React.useDeferredValue(value);
+  const filteredEmojis: Emoji[] = React.useMemo(() => {
+    if (deferredValue.trim().length === 0) return [];
+
+    return EmojiInlineIndexSearch.getInstance(data)
+      .search(deferredValue.replace(TRAILING_COLON_REGEX, ""))
+      .get();
+  }, [data, deferredValue]);
+
+  return (
+    <PlateElement as="span" {...props}>
+      <InlineCombobox
+        inputValue={value}
+        onInputValueChange={setValue}
+        element={element}
+        trigger=":"
+        filteredItems={filteredEmojis}
+      >
+        <InlineComboboxInput />
+
+        <InlineComboboxContent>
+          <InlineComboboxEmpty>No results</InlineComboboxEmpty>
+
+          <InlineComboboxList>
+            {(emoji: Emoji) => (
+              <InlineComboboxItem
+                key={emoji.id}
+                value={emoji}
+                onClick={() => {
+                  insertEmoji(editor, emoji);
+                }}
+              >
+                {emoji.skins[0].native} {emoji.name}
+              </InlineComboboxItem>
+            )}
+          </InlineComboboxList>
+        </InlineComboboxContent>
+      </InlineCombobox>
+
+      {children}
+    </PlateElement>
+  );
+}