@fuma-content/studio 0.1.0 → 1.0.1

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

@@ -1,86 +0,0 @@
-"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

@@ -1,47 +0,0 @@
-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

@@ -1,120 +0,0 @@
-"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

@@ -1,65 +0,0 @@
-"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>
-  );
-}